Reputation: 2999
Any idea how to make the div shape like this ?
Upvotes: 1
Views: 382
Reputation: 6720
This will work in all modern browsers and will fall back to a rectangle in older browsers.
.skewed {
border: solid 5px black;
height: 200px;
margin-top: 50px;
width: 100px;
transform: skewY(-30deg);
}
<div class="skewed"></div>
Upvotes: 4
Reputation: 241278
Just create a rectangle and skew the Y axis using the CSS3 transform
property.
In this case, transform: skewY(-20deg)
will work.
.shape {
border: 2px solid;
height: 200px;
width: 100px;
transform: skewY(-20deg);
margin: 2em 0;
}
<div class="shape"></div>
Upvotes: 5