平行四边形
注意：如果把这个效果运用到行内元素，需要把display属性设置为：block或inline-block
<div class="line"></div>
<style>
.line {
width: 100px;
height: 10px;
background: #dd6b4d;
transform: skewX(-45deg);
}
</style>
切角
<div class="jiao"></div>
<style>
.jiao {
width: 100px;
height: 10px;
background: #dd6b4d;
background: linear-gradient(-45deg,transparent 15px #58a 0);
}
梯形
<div class="jiao"></div>
<style>
.jiao {
width: 100px;
height: 10px;
background: #dd6b4d;
transform: perspective(.5em) rotatex(5deg);
}