4

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

S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254
  • 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 May 25 '15 at 05:47
  • There are a tonne of CSS shape generators out there. For example: https://coveloping.com/tools/css-shapes-generator and http://bennettfeely.com/clippy/ – James Ives May 25 '15 at 05:49

3 Answers3

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>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
stanze
  • 2,456
  • 10
  • 13
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>
tpie
  • 6,021
  • 3
  • 22
  • 41
  • how can I set border-radius: 4px; for top of shape ? – S.M_Emamian May 25 '15 at 05:55
  • 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. – tpie May 25 '15 at 05:57
  • Using CSS with the svg -- `svg { border-radius: 10px; }` -- seems to work fine. – misterManSam May 25 '15 at 06:19
  • 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. – tpie May 25 '15 at 06:26
  • You can consider using a `path` element instead of `polygon` to make the rounded corners (see [here](http://stackoverflow.com/a/30433716/1811992)) – web-tiki May 25 '15 at 08:33
0

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>
Adnan
  • 21
  • 4
  • 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 [tag:css-shapes] tag wiki – jbutler483 May 26 '15 at 21:29