解决方法
如何使用
CSS3
transform skew？
.shape {
width: 200px;
height: 50px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
}
这里没有什么可以解释的,这是一个简单的div元素,我偏偏30deg,这将导致你想要的形状.
注意：这是一个CSS3属性,所以较老的浏览器以及IE会破坏你的东西,确保你使用CSS3 Pie.
实现这一点的其他方法是使用：after和：之前的伪和CSS三角形以及内容属性.
Demo 2(用于演示目的的保持的红色三角形)
Demo 3(颜色更改)
Demo 4(如你所说,你需要使用top：0; for：before和：after pseudo,因为当你添加文本时,它会从顶部移动两个三角形,所以为了防止这样做,使用top：0 原文链接：https://www.f2er.com/css/214205.html
