首页技术正文

用CSS写气泡

攻城狮志煜技术 2022年11月18日

0 收藏 771 点赞 2,776 浏览 1053 个字

新学到的一个小效果

用CSS实现如下图效果，其中demo结构为：<div id=”square”></div>

实现这个效果需要用到两个知识点：

1、用border制作三角形

2、before、after伪元素

伪类元素可以看做是在某元素前加了一个元素

比如：<p>刘诗诗</p>

如果给这个元素设置一个before, p:before{content:”我爱”;},这个p就变成了：我爱刘诗诗

如果给这个元素设置一个after, p:after{content:”我爱”;},这个p就变成了：刘诗诗爱我

（ps:哈哈，这样有点不要脸，但是我爱刘诗诗！）

回到题目上，这个效果就是先画一个矩形，然后通过after或者before加上一个三角形，放到矩形右上角去。

那么如何用边框画三角形呢？

举例演示给大家：

代码如下：写一个p标签，给其设置如下样式

p{
                width:50px;
                height:30px;
                border-left:20px solid yellow;
                border-right:20px solid blue;
                border-top:20px solid red;
                border-bottom:20px solid pink;
                margin:100px auto;
            }

效果如图：

若此时，我们将p的宽高设为0px,效果如图：

不难发现，只要在这个基础上将边框的三面颜色设置为透明，就能得到一个三角形。

但有一点是，矩形是缺了一段的，我们可以让三角形颜色为白色覆盖掉矩形的边框，另外再用一个黑色的，比白色大的三角形放在白三角形的下面，这样就只漏出三角形的两条边了，所以这里同时用到了after和before，代码如下

#square{
                width:200px;
                height:100px;
                border:2px solid black;
                margin:20px auto;
                position:relative;
            }
            #square:before{
                content:"";
                width:0px;
                height:0px;
                border:10px solid transparent;
                border-left-color:black;
                position:absolute;
                top:20px;
                left:200px;
            }
            #square:after{
                content:"";
                width:0px;
                height:0px;
                border:8px solid transparent;
                border-left-color:white;
                position:absolute;
                top:22px;
                left:200px;
            }