html - 如何用 CSS 设置形状？

Question

是否可以使用 CSS 将背景设置为相同形状？

带有 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>

标签： htmlcss

Answer 1

由于它是纯色，请使用如下所示的倾斜和旋转：

.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>

也像下面有一个额外的包装器：

.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>