css - 这个 CSS 的哪一部分使这个三 Angular 形变钝了？

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”的红色语音气泡中钝 Angular 三 Angular 形的代码.我看到 border-width 被用来控制三 Angular 形，但为什么三 Angular 形是钝 Angular 而不是直 Angular ？

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删除的。