css 三角形缺口,

如图:图片描述

这个三角形缺口是透明的,请问咋个实现

大家请注意问题的关键,三角形能看见后面的背景

阅读 5.8k
7 个回答

我之前的做法是在导航栏上弄
弄多一行小小几px高的div的全是白色背景
被选中的那个背景为一种透明“有缺口白色背景”图片

div {
    width: 0;
    height: 0;
    border: 10px solid #fff;
    border-top-color: transparent;
}

透明的三角形大概是做不出来的。

但你可以做两个白色的梯形,留出中间那个三角形的位置就行了。

用border修饰实现三角形,想要透明用rgba

div{

width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: rgba(0,0,0,0.4)

}

页面地址发出来,研究一下就知道了

同意小U酱的说法,我也只想到这一个办法:
图片描述

——————————————华丽的分割线———————————————
用rotate做出来的效果:
图片描述

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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题