How to draw the following shape using CSS3 [duplicate]

Tags: html,css,css3,shape,css-shapes

Problem :

This question already has an answer here:

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.


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

enter image description here

Solution :

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

    CSS Howto..

    How to make the logo drop a bit in the nav menu and other suggestions

    How to animate a height change using javascript and css?

    How to dynamically change the value of a CSS property inside a stylesheet?

    How do I make the Android WebView not ignore the 'height' css property?

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is

    CSS Selectors - How to apply a defined class on the selector's event

    How load a table into multiple webpages using HTML?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How I can get an Image height and divide it by 2 using Jquery

    How can I slide a image up and down over a background image to create a scanning effect?

    How to Dynamically create a CSS class using AngularJS

    How to draw a gradient colored trapezoid with css3?

    How to change the width of a CSS flex-box column?

    How to change inline css using jquery in joomla

    How to enable auto indentation in lists and list items?

    How can I change the color of this text?

    How to place sticky footer div's next to each other when bottom:0 is set dynamically

    How can I get the current state of my div animation?

    How to remove css files?

    How to right align a div containing a form in another div?

    How to horizontally center a link element with CSS?

    How to keep symmetry with CSS fluid spacing of dynamic content

    How to create a 'p' tag using css [closed]

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to remove last TD in first LINE

    how can i add style with CSS to