如何在每个部分上用不同的颜色倾斜背景

Question

所以我希望实现这样的事情：https://preview.ibb.co/fRidmR/example.jpg

所以几乎每种颜色都是不同的div.可以只用CSS来完成吗？我用transform: skew尝试了一些东西，但无法弄清楚如何使我想成为另一个，并且每次第一个都会进入前一个元素。我尝试使用负边距和更多的填充，但我希望它响应迅速，这样看起来并不好。请帮忙。提前谢谢。

Answer 1

我能想到的最好的是可以有一系列嵌套的div，每个div都有一个图形背景，有一个透明区域来显示它嵌套的div的背景。

所以 html 代码是这样的：

<div id='grey_bg'>
<div id='red_skew'>
<div id='black_skew'>
</div>
</div>
</div>

然后有这样的 CSS 代码：

#grey_bg{background: grey;}
#red_skew{background-image:url(red_skew.png);}
#black_skew{background-image:url(black_skew.png);}

否则，只需为元素提供单个 bg 图像。