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이고 이쪽은 w입니다. 하이트 화살표는 -24px에 있습니다. 따라서 흰색 화살표가 줄의 맨 위에 겹치지 않도록하십시오 : JSFiddle.

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; 
}