思路：
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 }