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

Marvin · Accepted Answer · 2016-03-30T13:25:28.460

4

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>

edited Mar 30 '16 at 13:25

answered Mar 30 '16 at 13:06

Marvin

9,164
3
26
44

thats great thanks so much :) quickest answer ever! – user1673498 Mar 30 '16 at 13:14
Dam! I actually uploaded the wrong picture, I have now updated the question with the correct shape. Thanks – user1673498 Mar 30 '16 at 13:19
Updated my answer. – Marvin Mar 30 '16 at 13:22
Dam ur fast :) thanks so much greatly appreciated! – user1673498 Mar 30 '16 at 13:26

score 3 · Answer 2 · answered Mar 30 '16 at 13:08

a simple gradient can fake the shape :

using a class can easily make usable almost anywhere :)

.shaped {
  background: linear-gradient(240deg, transparent 1em, #FF1B28 1em);
  padding: 0 2em 0 1em;
}
body {
  background:#333;
  }
a {
  color:white;
  text-decoration:none;
  }

<h1 class="shaped"> title</h1>
<h2 class="shaped"> title</h2>
<h3 class="shaped"> title</h3>
<p class="shaped">text</p>
<nav> <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
  <a href="#" class="shaped">link</a>
</nav>

How to draw the following shape using CSS3

Update

2 Answers2