证明框的 CSS 三 Angular 形

Question

我有一个推荐框，我想在其中添加一个三 Angular 形。

.arrow {
    float: left;
    margin-left: 25px;
    margin-top: 20px;
    width: 0;
    height: 0;
    border-top: 20px solid #eee;
    border-left: 0px solid transparent;
    border-right: 25px solid transparent;
}

问题是三 Angular 形最终是实心的，而不是带有灰色边框的白色。下面是 CSS 当前显示方式的屏幕截图。在此先感谢您的时间和帮助。

Answer 1

您可以创建两个三 Angular 形，一个重叠另一个，以创建这种镶边效果。您可以使用::before 和::after 伪元素来做到这一点，这样您就不会拥有任何多余的 HTML。

http://jsfiddle.net/7K2c4/

.mybox {
    position: relative;
    border: 1px solid #ccc;
}
.mybox:before, 
.mybox:after { position: absolute;
    left: 20px;
    bottom: -19px;
    display: block;
    width: 0;
    height: 0;
    border-width: 0 25px 20px;
    border-style: solid;
    border-color: transparent;
    border-left-color: #fff;
    content: ' ';
}
.mybox:before { left: 19px;
    bottom: -21px;
    border-left-color: #ccc; }