如何使用CSS实现一个带尖角的气泡框?

7,074 阅读2分钟

今天的任务中遇上了一个气泡框,还有需要添加圆角和指向性尖角,所以打开百度默默学习了一波,此文仅供自己记录使用。

先来看看预览图

先写上盒子,上代码

HTML:
<div class="element"></div>

CSS:
.element{
    width: 0;
    height: 0;
    border-top: 20px solid red;
    border-right: 20px solid blue;
    border-bottom: 20px solid #727171;
    border-left: 20px solid palegoldenrod;
  }

实现效果如下:

具体的实现原理呢,一个盒子,作为一个块级元素,我们首先将它的宽和高都设置成0,再将边框的大小设置成20px,也就是形成了如上图这样的四等分三角形组成的一个正方形。 那我们要得到一个方向朝上的尖角,就必须让上,右,左的三角形“隐形”。透明属性可以帮助我们做到这一点,透明的背景欺骗了我们的眼睛~让我们以为他们消失了,实际上它们只是看不见了而已。

CSS:

.element{
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #727171;
    border-left: 20px solid transparent;
  }

正所谓:假如生活欺骗了你,不要慌张,你也可以欺骗它O(∩_∩)O哈哈~ 好了,不说废话,现在三角形已经出来了,如何“掏空”它变成透明的呢?这就是接下来我们要完成的工作了。 首先我们依然需要一个新的盒子。

HTML:

<div class="wrapper"></div>

CSS:

.wrapper {
  width: 300px;
  height: 200px;
  position: relative;
  margin: 20px auto;
  border: 2px solid #cccccc;
  border-radius: 15px;
}

实现效果如下:

然后我们需要为这个盒子添加上之前实现的三角形 bottom那个三角形与盒子颜色相同,其余的三角形选择“隐形”即可。这里可以使用伪元素::before 和 ::after来实现这个效果。这两个元素被默认为行内元素,所以需要更改它们的属性为块级元素,绝对定位。再添加一个小点的白色三角形遮盖上面的三角形,使其露出尖角边框。

代码奉上:

CSS: 

.wrapper:before {
    content: '';
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: #cccccc;
    position: absolute;
    top: 0;
    right: 20%;
    margin-top: -40px;
}

然后再次添加after选择器,用它来形成一个白色的三角形,并按照之前的写法把它定位到上边框上去。 这里需要特别提醒一点,那就是这个白色的小三角形,要比之前的三角形更小一点,至于大小可以自己调整,出来的效果可以了就基本完成了。

CSS: 

.wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border: 18px solid transparent;
    border-bottom-color: #FFFFFF;
    position: absolute;
    top: 0;
    right: 21%;
    margin-top: -36px;
}

那么整体的效果就实现啦~做此记录,下次学习。嘻嘻,