HTML CSS Slant / bevel

Question

是否可以在纯html / css中创建类似下面的内容？

我想做这个反复和完整（100％）宽度（最大左上角100px，右边最小50px，类似的东西）。

Answer 1

您可以通过转换（旋转）多个div

来达到以下结果

https://jsfiddle.net/6hyrt8ck/

<div class="blue"></div>
<div class="green"></div>

CSS：

.blue {
    background: blue;
    transform: rotate(5deg);
    transform-origin: 0 0;
    width: 110%;
    height: 200px;
}

.green {
    background: green;
    transform: rotate(-5deg);
    transform-origin: 0 100%;
    width: 110%;
    height: 200px;
}