How to set shape with CSS?

Question

Is it possible to set background in same shape with CSS?

Expected image with css

.cover {
    margin: 0;
    height: 70vh;
    width: 60vw;
    background-color: #073faa;
    border-radius: 0px 30px 30px 0px;
    transform-origin: bottom left;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
  border-radius:0px 10px 10px 0px
}

<div class="cover"></div>

almost the same: https://stackoverflow.com/a/68799902/8620333 simply remove some radius — Temani Afif, Aug 16 '21 at 13:15
When I see the css god @TemaniAfif I don't even try to solve the problem xD — Alexandre Elshobokshy, Aug 16 '21 at 13:39
@AlexandreElshobokshy all the solutions are welcome. Stack Overflow is made for multiple solutions not only one per question ;) — Temani Afif, Aug 16 '21 at 13:45
Related: [How to create a div with an irregular shape?](https://stackoverflow.com/questions/31987090/how-to-create-a-div-with-an-irregular-shape) — TylerH, Aug 16 '21 at 13:46

Temani Afif · Accepted Answer · 2021-08-16T14:30:33.720

Since it's a solid coloration use skew and rotation like below:

.cover {
  height: 70vh;
  position:relative;
  overflow:hidden;
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0 -20% 0 0;
  border-radius: 0px 30px 30px 0px;
  transform-origin:top left;
  transform: skew(-14deg) perspective(80px) rotateY(4deg);
  background-color: #073faa;
}

<div class="cover"></div>

Also like below with an extra wrapper:

.cover {
  height: 70vh;
  position:relative;
  overflow:hidden;
}

.cover div,
.cover div::before {
  content: "";
  position: absolute;
  inset:0 ;
  overflow:hidden;
  transform-origin:top left;
  border-radius: 0px 30px 30px 0px;
}

.cover div {
  transform: skew(-14deg);
}

.cover div::before {
  transform: skewY(-5deg);
  background-color: #073faa;
}

<div class="cover">
  <div></div>
</div>

How to set shape with CSS?

1 Answers1