What part of this CSS makes this triangle obtuse?

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

This is the code for the obtuse triangle in the red voice bubble saying "57" in http://nicolasgallagher.com/pure-css-speech-bubbles/demo/. I see border-width is being used to control the triangle, but why is it that the t开发者_StackOverflow中文版riangle is obtuse rather than right?

---

I believe you need both the before and after selectors:

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

The red is created with the :before, and part of it is erased with the :after.

---

jswolf19 is correct. You can also do this if you're extra hip:

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

... and skip the :after - note that the only thing I changed was transform: skewX(-30deg); and right from 0 to 40px