这种带箭头的边框怎么实现方便???

Question

这种边框怎么实现方便?

Answer 1

说爱我，拿去玩！http://cssarrowplease.com/

Answer 2

HTML：

<div class="test_triangle_border">
    <a href="#">三角形</a>
    <div class="popup">
        <span><em></em></span>测试
    </div>
</div>

　　

CSS：

.test_triangle_border{
    width:200px;
    margin:0 auto 20px;
    position:relative;
}
.test_triangle_border a{
    color:#333;
    font-weight:bold;
    text-decoration:none;
}
.test_triangle_border .popup{
    width:100px;
    background:#cf0;
    padding:10px 20px;
    color:#333;
    border-radius:4px;
    position:absolute;
    top:30px;
    left:30px;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block;
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #333;
    position:absolute;
    top:-10px;
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block;
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #cf0;
    position:absolute;
    top:1px;
    left:-10px;
}

　　

Answer 3

箭头用图标，然后定位

Answer 4

类似的例子：链接描述

Answer 5

用一个空的before伪类，旋转45度，定好位置