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>

并使用outline属性模拟边框，但是如何堆叠形状并赋予它们单个图片的外观？或者有没有办法在不叠加单个形状的情况下创建图片？

这就是我想要的：

Answer 1

CSS方法：转换和渐变

您可以使用tranksform: perspective和linear-gradient来获得形状。渐变也可以在中间创建线。对于外线，只需使用边框并根据需要在四边调整宽度。

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请参阅3D transformations和linear gradients的浏览器支持。

SVG方法

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

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请参阅SVG的浏览器支持。

Answer 2

不确定。您可以使用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，因此您可以使用这些值并了解它是如何工作的。