证件框的CSS三角形

Question

我有一个推荐箱，我想添加一个三角形。

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

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

Answer 1

您可以创建两个三角形，一个与另一个重叠，以创建此边框效果。您可以使用:: 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; }

Answer 2

您可以在其上放置另一个三角形，使用与背景相同的颜色缩小。您甚至不需要创建另一个HTML元素，只需使用伪元素选择器。