CODEWITHSUNDEEP
htmlcsscss-shapes
S.M_Emamian
S.M_Emamian

Reputation: 17383

How to create a custom shape - css

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

Upvotes: 4

Views: 3003

Answers (3)

Adnan
Adnan

Reputation: 21

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>

Upvotes: 0

stanze
stanze

Reputation: 2480

  • 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>

Upvotes: 6

tpie
tpie

Reputation: 6221

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>

Upvotes: 2

Related Questions