这个形状可以做吗CSS？

Question

我被要求在响应式网站上制作这样的背景。我考虑过使用渐变准备两个 div，但这是一个很大的问题。甚至有可能做到吗？将其用作背景图像对于更高和更低的分辨率来说都很麻烦。

有什么想法吗？

Answer 1

一些clip-path和伪元素可以近似为：

.box {
  width: 300px;
  aspect-ratio: .8;
  position: relative;
  z-index: 0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
}

.box:before {
  clip-path: polygon(0 0, 100% 50%, 10% 100%,0 100%);
  background: linear-gradient(40deg, #3185c5, #0ea1b1);
}

.box:after {
  clip-path: polygon(100% 30%, 100% 50%, 10% 100%,0% 100%, 0 80%);
  background: linear-gradient(40deg, #3185c5, #f55778);
}

<div class="box"></div>

这个形状可以做吗CSS？

Is it possible to do this shape CSS?

css

gradient

gradient-descent

css-shapes