android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？

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

先来看看预览图

先写上盒子，上代码

HTML:

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，也就是形成了如上图这样的四等分三角形组成的一个正方形。

那我们要得到一个方向朝上的尖角，就必须让上，右，左的三角形“隐形”。透明属性可以帮助我们做到这一点，透明的背景欺骗了我们的眼睛~让