CODEWITHSUNDEEP
csscss-shapes
FeelRightz
FeelRightz

Reputation: 2999

CSS how to make special div shape

Any idea how to make the div shape like this ?

enter image description here

Upvotes: 1

Views: 382

Answers (2)

Brandon Gano
Brandon Gano

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

Josh Crozier
Josh Crozier

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

Related Questions