css - 使用 css3，是否可以使制表符箭头指向下方？

Question

是否可以创建如图所示的三 Angular 形？即使有双边框颜色？

(我通过做两个 div 在这个三 Angular 形将出现的框中实现了双边框颜色)

Answer 1

此方法使用 Jon Rohan 描述的方法(已由@RP 链接。)从边框样式和 0x0 大小的 block 元素(在本例中为 div)制作三 Angular 形

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}