问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
zzard
    14661824

    TIM截图20191125190232.png

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

    csshtmlhtml5前端css3
    阅读 3.8k
    3 个回答
    得票最新
    头像
    牛书书
      10.1k72035
      ✓ 已被采纳

      clipboard.png

      头像
      一叶知秋
        44018

        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: '';

        头像
        攻城狮Lee丶
          2.8k3833
          <!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

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