首页 前端知识 css实现伪类三角形气泡框 带边框

css实现伪类三角形气泡框 带边框

2024-06-16 01:06:16 前端知识 前端哥 152 204 我要收藏
<!DOCTYPE html>
<html lang="zn-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带三角形的气泡框</title>
    <style>
    .box{
        width:300px;
        height:300px;
        border: 10px solid #0082df;
        position: relative;
    }
    .box::after{
        content: "";
        position: absolute;
        right:60px;
        top:300px;
        width:0px;
        height:0px;
        border:30px solid transparent;
        border-top: 30px solid #0082df;
    }
    .box::before{
        content: "";
        position: absolute;
        top:295px;
        left:180px;
        z-index: 1;
        width:0px;
        height: 0px;
        border: 30px solid transparent;
        border-top:30px solid #fff;  
    }
    </style>
</head>
<body>
   <div class="box">
   </div>
</body>
</html>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12230.html
标签
评论
发布的文章

前端——12.表单标签

2024-06-21 00:06:57

src、href和url含义及区别

2024-06-21 00:06:56

CSS知识点大全

2024-06-21 00:06:16

JS垃圾回收机制(GC)

2024-06-21 00:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!