這個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像素