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 force Chrome browser to reload .css file while debugging in Visual Studio?

    How is better to do with CSS sprites [closed]

    How to check a css propert is supported?

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    how to use pseudo-classes (like after, before) inline in CSS

    How to create tabs using Javascript and Jquery

    how to get this table to work properly?

    How to use nify javascript to make round corner box? Im using but not working

    html, css - how to use display: inline-block

    How can clients without Ruby view web pages using SASS?

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    android - How to build complex views that stretch?

    How to create folder style in CSS

    how do I add equal gap on each side of the text with css?

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How to change color of button in active state using inline CSS?

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How to move links in the middle of the Web page using html/css?

    How to combine two css3 gradients ?

    How to vertically align text over an image

    In a text based browser game, how would I make a typewriter effect in the dialogue?

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    How to get asterisk in placeholder with css

    How to “zoom”/“scale” in div's content with css or jquery?

    How to set negative z-index with jQuery?

    How to change border of div containing radio button when checked

    CSS and jQuery current links navigation: how to update the
  • class
  • How to change the display property in a css class using js when user clicks a button

    How to center div the whole screen page using css

    how to stop CSS hyphenation, no dash between words