使用css3，是否可以使标签箭头指向下方？

Question

是否有可能创建一个像图中所示的三角形？即使是双边框颜色？

（我在框中实现了双边框颜色，这个三角形会通过做两个div来实现）

Answer 1

此方法使用Jon Rohan描述的方法（已经由@RP链接）来制作边框样式的三角形和0x0大小的块元素（在这种情况下为div）

example jsfiddle

我为内部白色边框添加了额外的div，如果您尝试最小化HTML元素，则可以将其删除

HTML：

<div id="div1">
    <div id="div2">
        <div id="div3">
            Howdy!
            <div id="tabarrowShadow"></div>
            <div id="tabarrow"></div>
            <div id="tabarrowInner"></div>
            <div id="tabarrowInner2"></div>
        </div>
    </div>
</div>

CSS：

body {font-family:Helvetica,Arial,sans-serif;}
#div1 {border:solid 1px #ddd;padding:2px;background-color:#ebebeb;position:relative;}
#div2 {border:solid 1px #ddd;}
#div3 {border:solid 1px #f7f7f7;padding:25px;height:20px;}
#tabarrow {width:0;height:0;position:absolute;top:75px;left:20px;
    border-color:#ddd transparent transparent transparent;
    border-style:solid;
    border-width:15px;
}
#tabarrowInner {width:0;height:0;position:absolute;top:75px;left:22px;
    border-color:#f7f7f7 transparent transparent transparent;
    border-style:solid;
    border-width:13px;
}
#tabarrowInner2 {width:0;height:0;position:absolute;top:74px;left:23px;
    border-color:#eee transparent transparent transparent;
    border-style:solid;
    border-width:12px;
}
#tabarrowShadow {width:1px;height:1px;box-shadow:0 0 10px 1px #000;position:absolute;top:86px;left:35px}

Answer 2

这可以通过创建一个空div并给它一个宽度为0，并将所需厚度的边框放到你希望三角形指向的另一侧来实现。

然后，您可以将其定位在您希望的位置。

有关说明，请参阅http://jonrohan.me/guide/css/creating-triangles-in-css/。