Trapezium响应Div与CSS或jQuery

我必须建立这个网站，我面临着交替Trapezium Divs的独特挑战。 我之前从未遇到过这样的事情，我也不知道如何实现这一目标。 为了使事情变得更复杂，这将成为一个响应迅速的网站。

有任何想法吗？

Answer 1

您可以使用SkewX转换来扭曲div之前的元素：

div { height: 50px; display: inline-block; background: lightgray; padding: 10px; line-height: 50px; text-align: center; position: relative; transition: all 0.6s; z-index:1; } div:before { content: ""; position: absolute; height: inherit; background: inherit; top: 0; left: 30%; height: 70px; width: 100%; -webkit-transform: skewX(45deg); -moz-transform: skewX(45deg); transform: skewX(45deg); z-index: -1; } div:hover { background: tomato; } 

 
Some text here 

Answer 2

SVG

如果你在svg中定义了多个trapzoids，你可以在div中重用它们来获得你想要的形状。 定义形状模板使形状可重复使用。
要重用它们，只需定义一个元素

 .example { width: 400px; height: 200px; border: 2px solid pink; } .template { display: none; }