渐变内的CSS渐变

问题描述

我想知道是否可以通过使用三个元素来实现像this photo中那样的渐变。我现在尝试使用三个部分：

顶部：background: linear-gradient(172deg,#FFFFFF 50%,#2D1E2F 50%);

中：background-color: #2D1E2F;

底部：background: linear-gradient(172deg,#2D1E2F 50%,#FFFFFF 50% );

我尝试过类似background: linear-gradient(172deg,#2D1E2F 5%,#674568 );的操作，但是颜色不能正确匹配。谢谢。

解决方法

您可以考虑clip-path来帮助您解决白色部分，然后使用任何一种渐变：

.box {
  width:350px;
  height:500px;
  background:linear-gradient(45deg,red,blue);
  clip-path:polygon(0 20%,100% 0%,100% 80%,0% 100%)
}

<div class="box">

</div>

我不知道这是否可以按照您想要的方式进行。我已经使用颜色选择器查看了图像，渐变是从上到下，但是如果您使用渐变来创建角度，则不能只将渐变方向更改一半。我建议只使用Temani Afif发布的解决方案，但如果您确实是100％需要3件而不是一件，则有两种解决方法。

使顶部和底部三角形片为纯色。它不会完全匹配也不会看起来不错，但是只要在中间片段上添加渐变，它看起来就足够接近了。

body {
  background: black;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 365px;
  height: 100vh;
  background: #FFFFFF;
  margin: 0 auto;
}

.top {
  height: 20%;
  width: 100%;
  background: linear-gradient(to bottom right,#FFFFFF 50%,#674568 50%);
}

.mid {
  flex: 1;
  width: 100%;
  background: linear-gradient(#674568,#2d1e2f);
}

.bot {
  height: 20%;
  width: 100%;
  background: linear-gradient(to bottom right,#2d1e2f 50%,#FFFFFF 50% );
}

<div class="container">
  <div class="top"></div>
  <div class="mid"></div>
  <div class="bot"></div>
</div>

应用Temani Afif发布的解决方案，但在单独的部分上

body {
  background: black;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 365px;
  height: 100vh;
  background: #FFFFFF;
  margin: 0 auto;
}

.top {
  height: 20%;
  width: 100%;
  background: linear-gradient(#674568,#5f4060);
  clip-path: polygon(0 100%,100% 100%,100% 0);
}

.bot {
  height: 20%;
  width: 100%;
  background: linear-gradient(#352337,#2d1e2f);
  clip-path: polygon(0 0,0 100%,100% 0);
}

.mid {
  flex: 1;
  width: 100%;
  background: linear-gradient(#5f4060,#352337);
}

<div class="container">
  <div class="top"></div>
  <div class="mid"></div>
  <div class="bot"></div>
</div>

声音听起来像是很多不必要的工作，所以为了您自己的理智，请坚持使用一个div。

html linear-gradients