如何在每个部分歪斜不同颜色的背景

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图像即可。