这个CSS的什么部分使这个三角形变成钝角？

Question

.example-number:after { 
    border-color: transparent #FFFFFF; 
    border-style: solid; 
    border-width: 0 0 140px 55px; 
    bottom: -140px; 
    content: ""; 
    position: absolute; 
    right: 85px; 
} 

这是红色的声音泡沫中的钝角三角形代码http://nicolasgallagher.com/pure-css-speech-bubbles/demo/中的“57”。我看到边框宽度被用来控制三角形，但为什么三角形是钝的而不是正确的？

Answer 1

我相信你既需要before和after选择：

/* creates the larger triangle */ 
.example-number:before { 
    content:""; 
    position:absolute; 
    bottom:-140px; 
    right:0; 
    border-width:0 0 140px 140px; 
    border-style:solid; 
    border-color:transparent #C91F2C; 
} 

/* creates the larger triangle */ 
.example-number:after { 
    content:""; 
    position:absolute; 
    bottom:-140px; 
    right:85px; 
    border-width:0 0 140px 55px; 
    border-style:solid; 
    border-color:transparent #fff; 
} 

红色与:before创建的，它的一部分与:after擦除。

Answer 2

jswolf19是正确的。你也可以做到这一点，如果你额外的臀部：

.example-number:before { 
    content: ""; 
    position: absolute; 
    bottom: -140px; 
    right: 40px; 
    border-width: 0 0 140px 100px; 
    border-style: solid; 
    border-color: transparent #C91F2C; 
    -webkit-transform: skewX(-30deg); 
    -moz-transform: skewX(-30deg); 
    transform: skewX(-30deg); 
} 

...并跳过:after - 注意，我唯一改变的事情是transform: skewX(-30deg);和right从0到40像素