CSS 可以创建多色梯形吗？

Question

我正在考虑更新一个 2005 网站，该网站使用两个图像来创建页面的顶部和底部框架。这些图像是一个简单的双色梯形，每个彩色区域周围都有一个边框。下图和上图一模一样，只是倒过来了。

我知道如何使用 CSS 边框创建梯形，如下所示：

#trapezoid {
    border-bottom: 100px solid #889cb0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div id="trapezoid"></div>

并使用轮廓模拟边框属性，但是如何堆叠形状并使它们看起来像一张图片？或者有没有办法不用堆叠单个形状来创建图片？

这就是我想要的：

Answer 1

当然可以。您可以使用 clip-path 属性。

.top {
   clip-path: polygon(3.5% 0%, 96.5% 0%, 100% 100%, 0% 100%);
   -webkit-clip-path: polygon(3.5% 0%, 96.5% 0%, 100% 100%, 0% 100%);
   background-color: #889cb0;
   width: 360px;
   height: 20px;
   margin-left: 20px;
 }

 .bottom {
   clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
   -webkit-clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
   background-color: #d8e0e8;
   width: 400px;
   height: 30px;
 }

<div class="top">
</div>
<div class="bottom">
</div>

这里也有一个 Codepen，因此您可以尝试使用这些值并了解它是如何工作的。

Answer 2

CSS 方法：变换和梯度

您可以用 tranksform: perspective and a linear-gradient 实现形状。渐变也可以在中间创建线条。外线只要用一个border，四边的宽度根据需要调整就可以了。

这是一个工作示例：

.trapezoid {
  width: 500px;
  height: 50px;
  transform: perspective(5px) rotateX(1deg);
  margin: 50px;
  background: linear-gradient(to bottom, #889cb0, #889cb0 40%, #465b6c 40%, #465b6c 45%, #d8e0e8 45%);
  border-top: 3px solid #465b6c;
  border-bottom: 2px solid #465b6c;
  border-right: 4px solid #465b6c;
  border-left: 4px solid #465b6c;
}

.flipped {
  transform: perspective(5px) rotateX(-1deg);
  background: linear-gradient(to top, #889cb0, #889cb0 40%, #465b6c 40%, #465b6c 45%, #d8e0e8 45%);
  border-top-width: 2px;
  border-bottom-width: 3px;
}

<div class="trapezoid"></div>
<div class="trapezoid flipped"></div>

查看浏览器对 3D transformations and linear gradients 的支持。

SVG 方法

虽然您要求 CSS 解决方案，但我强烈建议您对形状使用 SVG。它们在语义上更适合您的用例、可扩展、响应迅速并提供更好的浏览器支持。

这是一个工作示例：

.trapezoid {
  width: 604px;
  height: 54px;
}

.trapezoid polygon {
  stroke-width: 2;
  stroke: #465b6c
}

.trapezoid .top {
  fill: #889cb0;
}

.trapezoid .bottom {
  fill: #d8e0e8;
}

.trapezoid.flipped {
  margin-top: 30px;
  transform: rotate(180deg);
}

<svg viewbox="-2 -2 604 54" class="trapezoid">
  <polygon points="60,0 540,0 600,50 0,50" class="bottom" />
  <polygon points="60,0 540,0 564,20 36,20" class="top" />
</svg>

<svg viewbox="-2 -2 604 54" class="trapezoid flipped">
  <polygon points="60,0 540,0 600,50 0,50" class="bottom" />
  <polygon points="60,0 540,0 564,20 36,20" class="top" />
</svg>

查看浏览器对 SVG 的支持。

CSS 可以创建多色梯形吗？

Can CSS create a multi-colored trapezoid?

css

css-shapes

CSS 方法：变换和梯度

SVG 方法