css画不同角度空心箭头,css – 图像前面的空心箭头

参见英文答案 >

Transparent arrow/triangle indented                                    3个

我正试图在图像前面创建一个空心的CSS箭头.

我明白了……但感觉非常脏.有没有更好的方法来做到这一点？

跨浏览器兼容性(IE8)将是非常棒的.

SCSS

.arrowwrap {

width:100%;

padding:0;

position:relative;

overflow:hidden;

margin:-$arrow_height 0 0 0;

&:after {

content:'';

position:absolute;

height:$arrow_height;

width:50%;

margin:-$arrow_height 0 0 -$arrow_width;

left:0;

z-index:99999;

background:$box_color;

}

&:before {

content:'';

position:absolute;

height:$arrow_height;

width:100%;

left:50%;

margin:0 0 0 $arrow_width;

z-index:99999;

background:$box_color;

}

.arrowone {

width: 0;

height: 0;

border-style: solid;

border-width: $arrow_height $arrow_width 0 $arrow_width;

/* border-color: transparent transparent #333 transparent; */

border-color:transparent $box_color $box_color $box_color;

margin:auto;

}

}

http://jsfiddle.net/dhs2eba2/