如图:
这个三角形缺口是透明的,请问咋个实现
大家请注意问题的关键,三角形能看见后面的背景
用border修饰实现三角形,想要透明用rgba
div{
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: rgba(0,0,0,0.4)
}
div::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: -10px;
width: 20px; /*自己调*/
border: 10px solid transparent;
border-bottom-color: white;
}
div::after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: -10px;
width: 88px; /*自己调*/
border: 10px solid transparent;
border-bottom-color: white;
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
我之前的做法是在导航栏上弄
弄多一行小小几px高的div的全是白色背景
被选中的那个背景为一种透明“有缺口白色背景”图片