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

zzard

14661924

发布于
2019-11-25

TIM截图20191125190232.png

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

css html

html5 前端 css3

阅读 3.9k

3 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2019-11-26

更新于
2019-11-26

<!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

查看全部 3 个回答

推荐问题

相似问题

找不到问题？创建新问题

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

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

请问开发React Native，一般是推荐哪个主流的UI库呢？