Quelle partie de ce CSS rend ce triangle obtus?

Question

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

Ceci est le code pour le triangle obtus dans la bulle vocale rouge indiquant "57" dans http://nicolasgallagher.com/pure-css-speech-bubbles/demo/. Je vois que la largeur de la bordure est utilisée pour contrôler le triangle, mais pourquoi est-ce que le triangle est obtus plutôt que juste?

Answer 1

Je crois que vous avez besoin à la fois les before et after sélecteurs:

/* 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; 
} 

Le rouge est créé avec le :before, et une partie de celui-ci est effacée avec le :after.

Answer 2

jswolf19 est correct. Vous pouvez aussi le faire si vous êtes hanche supplémentaire:

.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); 
} 

... et sauter le :after - noter que la seule chose que j'ai changé était transform: skewX(-30deg); et right de 0 à 40px