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

最新推荐文章于 2024-12-18 17:30:53 发布

每一天，每一步

最新推荐文章于 2024-12-18 17:30:53 发布

阅读量903

点赞数 9

分类专栏： HTML/CSS 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/u010234868/article/details/135743298

版权

HTML/CSS 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一段HTML和CSS代码，展示了如何在div元素上创建一个带有三角形边框的气泡框效果，通过:before和:after伪元素实现自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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