思路：
1、最外层的盒子使用属性：width:100%、overflow:hidden、padding:50px 0（padding视情况而定）；
2、放内容的盒子正常布局，最后添加伪元数:befor和:after，伪元素需要设置高度还有其他几个属性，伪元素必须添加content: ""才能显示起作用；
3、transform-origin属性会改变元素旋转的基点，默认基点为左上角（0,0）；第一个值代表基点在X轴偏移量；第二个值代表基点在Y轴的偏移量；第三个值是Z轴的偏移量(一般用不到)；
left就相当于0点的位置=0%
right就相当于100%
top就相当于0点的位置=0%
bottom就相当于100%的位置
4、正常元素旋转的时候，基点是元素的中心位置；
效果图：
1 <div class="content"> 2 <div class="box">Hello</div> 3 </div>
1 .content { 2 margin-top: 50px; 3 width: 200px; 4 padding: 50px 0; 5 overflow: hidden; 6 } 7 8 .box { 9 border-radius: 0px; 10 width: 200px; 11 height: 100px; 12 background-color: green; 13 position: relative; 14 } 15 16 .box::before { 17 position: absolute; 18 left: 0; 19 content: ""; 20 z-index: -1; 21 width: 210px; 22 height: 100px; 23 background-color: skyblue; 24 transform: rotate(-10deg); 25 transform-origin: left top; 26 } 27 28 .box::after { 29 position: absolute; 30 right: 0; 31 content: ""; 32 z-index: -1; 33 width: 210px; 34 height: 100px; 35 background-color: indianred; 36 transform: rotate(-10deg); 37 transform-origin: right bottom; 38 }