在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处设置此白色箭头，以免白线与您的行顶部重叠，如下所示：{ {3}}

Answer 2

JSFiddle

body{background:#ccc;}
#myArrow {
    width:200px;   
    height:1px;
    position:relative;
    margin:100px auto;
}
#myArrow:before {
content: "";
width: 14px;
height: 14px;
position: absolute;
top: -7px;
margin-left: -7px;
left: 50%;
border-top: 2px solid #0099B4;
border-left: 2px solid #0099B4;
transform: rotateZ(-135deg);
}
#myArrow:after {
content: "";
width: 92px;
height: 2px;
position: absolute;
left: 0;
background: #0099B4;
box-shadow: 110px 0 #0099B4;
}