求助如何实现透明的三角缺口

TIM截图20191125190232.png

如图。
因为 body 有底色是可以换的,所以三角必须透明。
做成实心三角取色造成视觉欺骗,感觉行不通。

阅读 3.8k
3 个回答

clipboard.png

width: 10px;
height: 10px;
border: solid 1px #fff;
border-width: 1px 1px 0 0;
border-radius: 0 0 0 10px;
box-sizing: border-box;
.rotate(-45deg);
background-color: #fff;
position: absolute;
content: '';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 40px;
            background-color: red;
            position: relative;
        }
        span{
            position: absolute;
            left:50%;
            margin-left: -10px;
            bottom: 0;
            height: 0;
            width: 0;
            border-width:0 10px 10px;
            border-style:solid;
            border-color:red red #fff;/*透明 透明  灰*/
        }
    </style>
</head>
<body>
<div>
    <span></span>
</div>
</body>
</html>

企业微信截图_15747331148763.png

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