How to draw the following shape using CSS3

Question

I would like to draw the following shape using CSS3 as i need to put text inside it.

The shape im trying to create looks like the image below.

I have never drawn shapes using CSS so not sure how to go about it.

Update

New shape uploaded accidentaly uploaded the wrong shape, it needs to have a line running along the bottom

Answer 1

Check The Shapes of CSS, it's an excellent source for many types of shapes created with CSS.

I've created a JSFiddle for you with the expected result.

.full-width-wrap {
  width: 100%;
  border-bottom: 1px solid red;
}

.shaped {
  line-height: 1.5em;
  border-bottom: 1.5em solid red;
  border-right: 50px solid transparent;
  height: 0;
  width: 300px;
}

<div class="full-width-wrap">
    <div class="shaped">
      Some text
    </div>
</div>