代码之家 › 专栏 › 技术社区 › Marcin

可以这样做吗?

gradient-descent css-shapes gradient css

Marcin · 技术社区 · 3 年前

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

有什么想法吗?

1 回复 | 直到 3 年前

Temani Afif 3 年前

一些剪辑路径和伪元素可以近似于此:

.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);
}