HTML CSS 倾斜/斜 Angular

Question

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

我想做这个响应式和全 (100%) 宽度(最大左 Angular 100 像素，右边最小 50 像素，类似的东西)。

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