html - div 上的底部空箭头

Question

如何使箭头中间透明？

#myArrow {
    width:200px;   
    height:100px;
    position:relative;
    border-bottom:1px solid #0099B4;
}

#myArrow:after {
    content:"";
    border-color: #0099B4 transparent transparent transparent;
    border-style:solid;
    border-width:12px;
    width:0;
    height:0;
    position:absolute;
    bottom:-24px;
    left:45%;
}

http://jsfiddle.net/rj75qcfa/

Answer 1

您可以使用 :before 来做与您正在做的类似的事情，只是顶部有一个像素，更高的 z-index 和白色边框:

#myArrow:before {
    content:"";
    border-color: #FFF transparent transparent transparent;
    border-style:solid;
    border-width:12px;
    width:0;
    height:0;
    position:absolute;
    bottom:-23px;
    left:45%;
    z-index:1;
}

JSFiddle

注意:实际上我会将你的背景箭头底部属性设置为 -25px 并将这个白色箭头设置为 -24px，以免你的白色箭头与顶部重叠你的线路，像这样:JSFiddle .