How to create a custom shape - css [duplicate]

Question

I would like to create a custom shape like this image :

enter image description here

how can I do ?

My CSS :

#chevron { 
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px; 
  width: 200px; }

#chevron:before { 
  content: ''; 
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 0; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

My HTML file :

<div id="chevron">

</div>

But my result isn't what I want :

enter image description here

You could alter the top of both the pseudos and set overflow: hidden on the container or, you could use gradients. Knowing where and how this shape would be used, whether it would have text inside or not etc would help in giving better suggestions. — Harry
– Harry, Commented May 25, 2015 at 5:47
There are a tonne of CSS shape generators out there. For example: coveloping.com/tools/css-shapes-generator and bennettfeely.com/clippy — James Ives
– James Ives, Commented May 25, 2015 at 5:49

misterManSam · Accepted Answer · 2015-05-25 06:27:25Z

6

Add the background color to the parent div to fill in the gap
Place the border-radius on the parent div to create the two rounded corners
Move the :before and :after down slightly with top: 20px so they don't peak out the top of the div

Example

Here is a fiddle of the below:

#chevron {
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div id="chevron"></div>

edited May 25, 2015 at 6:27

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

answered May 25, 2015 at 6:00

stanze

2,47814 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.M_Emamian Over a year ago

but when I set an img tag, It will not be good. <div id="chevron"> <img src="https://i.sstatic.net/HtYUn.jpg" style="width:120px;height:120px"/> </div>

web-tiki Over a year ago

you should use skewX()/skewY() rather than skew() (see MDN)

tpie · Accepted Answer · 2015-05-25 06:24:58Z

2

You could skip the CSS and use svg:

Plunker

HTML:

<svg preserveAspectRatio="none" width="200px" height="100px">

  <polygon points="0,0 200,0 200,80 100,100 0, 80"
             style="fill:teal;stroke:rgba(0,0,0,1);stroke-width:0" />
</svg>

Note that if you need rounded on corners, svg polygons can be tricky as they do not inherently have an attribute similar to border-radius. You can set stroke-linejoin="round" and then adjusting the stroke width attribute to adjust how much it rounds. This works good for solid shapes where you can set the stroke color the same as the fill, or if you can have a border of a different color.

HTML:

<svg width="300" height="200">

  <polygon points="10,10 210,10 210,90 110,110 10, 90"
             style="fill:teal;stroke:teal;stroke-width:10" stroke-linecap="round" stroke-linejoin="round" />
</svg>

edited May 25, 2015 at 6:24

answered May 25, 2015 at 5:52

tpie

6,2393 gold badges24 silver badges41 bronze badges

5 Comments

S.M_Emamian Over a year ago

how can I set border-radius: 4px; for top of shape ?

tpie Over a year ago

slightly more complicated answer. I can point you in the right direction. SVG polygon doesn't have a border radius setting, though you can hack it a bit in some situations with stroke settings..I'll add it to the plunker, one sec.

misterManSam Over a year ago

Using CSS with the svg -- svg { border-radius: 10px; } -- seems to work fine.

tpie Over a year ago

eh...not quite. It does apply the style to the border of the svg element, but not what you draw with it..Check my plunker, you can see the effect that produces. This might be ok in some obscure case, I suppose.

web-tiki Over a year ago

You can consider using a path element instead of polygon to make the rounded corners (see here)

Adnan · Accepted Answer · 2015-05-25 06:48:27Z

I think that you want to write on this shape

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS Example</title>
        <style type="text/css">
            #chevron{ 
                position: relative;
                text-align: center;
                padding: 12px;
                margin-bottom: 6px;
                height: 40px; 
                width: 200px;
                font-size:40px;
                color:#FFF;
                background:#3794d1;
                border-radius: 5px 5px 0 0;
            }
            #chevron:before{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                left: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, 6deg);
                -moz-transform: skew(0deg, 6deg);
                -ms-transform: skew(0deg, 6deg);
                -o-transform: skew(0deg, 6deg);
                transform: skew(0deg, 6deg);
            }
            #chevron:after{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                right: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, -6deg);
                -moz-transform: skew(0deg, -6deg);
                -ms-transform: skew(0deg, -6deg);
                -o-transform: skew(0deg, -6deg);
                transform: skew(0deg, -6deg);
            }
        </style>
    </head>
    <body>
        <div id="chevron">Welcome</div>
    </body>
</html>

Please, if you're going to post a copy from shapes of css, please state your source. However, please kindly note said link is already on the css-shapes tag wiki

Collectives™ on Stack Overflow

How to create a custom shape - css [duplicate]

3 Answers 3

Example

2 Comments

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

2 Comments

5 Comments

1 Comment

Linked

Related