背景颜色存在透明度时,能否使用堆叠的方式创建箭头(线)

来源:2-12 项目作业

慕容10414756

2021-09-25 20:30:40

老师,在banner左侧的一级菜单中,右侧有个箭头,我尝试使用盒子堆叠方法实现,但因为背景颜色是透明色,导致显示样式错误

这种情况下,右侧箭头是只能使用图片吗?

相关截图:

https://img.mukewang.com/climg/614f157309d9247415080792.jpg

相关代码:

css:
.right-jiantou {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 12px;
transition: all .1s linear 0s;
}
.right-one {
background-color: #FFFFFF;
width: 10px;
height: 10px;
transform: rotate(45deg);
}
.right-two {
background-color: rgba(0, 0, 0, .62);
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 3px;
}

html:
<div class="right-jiantou">
<div class="right-one"></div>
<div class="right-two"></div>
</div>



写回答

1回答

好帮手慕然然

2021-09-26

同学你好,使用堆叠的方式制作箭头,一般就是利用堆叠盒子的颜色与背景颜色相同而实现的,如果背景颜色是透明色的话,不建议再使用这种方式实现,可以使用图片代替,或者使用iconfont字体图标代替都行,实现起来也很方便。

祝学习愉快!

1

0 学习 · 17877 问题

查看课程