时间戳

首页 > 解决方案 > 渐变中的 CSS 渐变

html - 渐变中的 CSS 渐变

问题描述

我想知道是否可以通过使用三个元素来实现这张照片中的渐变。我现在正在尝试使用三个部分：

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

中间：background-color: #2D1E2F;

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

我已经尝试了一些东西，background: linear-gradient(172deg,#FFFFFF 50%, #2D1E2F 50%, #2D1E2F 5%, #674568 );但是颜色不正确匹配。谢谢。

标签： htmlcsslinear-gradients

解决方案

您可以考虑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>

推荐阅读