draw angular side / parallelogram using CSS
How about using CSS3 transform skew
?
Demo
.shape {
width: 200px;
height: 50px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
}
Nothing much to explain here, it's a simple div
element, which I've skewed by 30deg
which will result in the shape you expected.
Note: It's a CSS3 property, so older browsers, as well as IE will spoil your things, make sure you use CSS3 Pie.
Other way to achieve this is by using :after
and :before
pseudo and CSS Triangles along with content
property.
Demo 2 (Kept red triangles for demo purpose)
Demo 3 (Color Changed)
Demo 4 (As you commented, you need to use top: 0;
for :before
and :after
pseudo as well, because when you add text, it will shift both the triangles from the top. So inorder to prevent that, use top: 0;
)
Here, am using a simple div
element and placing 2 CSS triangles which are positioned absolute
to the container. This is more compatible than above, if you are going for a NON CSS3 solution, you can choose this. Make sure you use display: block;
for :before
as well as :after
. And ofcourse you can merge the common styles but I've kept both separate, so that you can get easability to customize them separately.
.shape {
width: 200px;
height: 50px;
background: #000;
margin: 50px;
position: relative;
}
.shape:before {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: -50px;
}
.shape:after {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
right: -50px;
}
HTML
<div class="shape">
<div class="text">
text goes here
</div>
</div>
CSS
.shape {
width: 200px;
height: 30px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
color:#fff;
}
.text{
width: 150px;
height: 30px;
margin:0px auto;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
transform: skew(-30deg);
color:#fff;
}