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到40px

这个CSS的哪个部分使这个三角形变钝？

2 个答案: