gpt4 book ai didi

html - 图片前的空心箭头

转载 作者:太空狗 更新时间:2023-10-29 12:33:54 25 4
gpt4 key购买 nike

<分区>

我正在尝试在图像前面创建一个空心 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com