Does anyone have an idea how to make this tab like shape :
See Question&Answers more detail:osHere is an alternate approach using CSS3 transforms for achieving the required shape. Like the SVG answer, this method can also be used when the background (behind the shape) is not a solid color.
The snippet has two samples and
transform: skew(45deg)
and overflow: hidden
on the parent to hide the skewed area on the left side.rotateX
transform with a bit of perspective
to produce the skewed/angled side. The transform-origin
setting means that only one side is angled.div.a {
position: relative;
height: 70px;
width: 250px;
margin-top: 20px;
padding: 24px 4px 0px;
overflow: hidden;
}
div.a:before {
position: absolute;
content: '';
top: 20px;
left: 0px;
width: 100%;
height: 50px;
background: #c94935;
z-index: -1;
}
div.a:after {
position: absolute;
content: '';
top: 0px;
left: -20px;
width: 60%;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
height: 20px;
background: #c94935;
z-index: -1;
}
div.b {
position: relative;
height: 50px;
width: 250px;
padding: 4px 4px 0px;
margin-top: 40px;
background: #c94935;
}
div.b:before {
position: absolute;
content: '';
top: -20px;
left: 0px;
width: 50%;
height: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
transform-origin: left top;
-webkit-transform: perspective(10px) rotateX(5deg);
-moz-transform: perspective(10px) rotateX(5deg);
transform: perspective(10px) rotateX(5deg);
background: #c94935;
}
body {
background: url(http://lorempixel.com/500/500);
}
<div class="a">
Lorem Ipsum Dolor Sit Amet...
</div>
<div class="b">
Lorem Ipsum Dolor Sit Amet...
</div>