Demo

.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