html绘制凹凸形状边框,CSS样式学习之利用边框边绘制会话气泡

CSS样式学习之利用边框边绘制会话气泡

夜月归途 • 2020 年 05 月 30 日

今天在DIY一个时光机的页面，我本身CSS技能偏弱，在页面调整方面耗时较多。为了页面美观，我还设计了一个气泡样式，每条微语一个气泡框，气泡样式实现的效果如下：

气泡样式的实现原理其实就是一个圆角矩形加上一个三角形，圆角矩形直接定义样式即可：.time-row {

background: #1abc9c14;

padding: 0.625rem 0.75rem;

overflow: hidden;

border-radius: 0.35rem;

margin-left: 10px;

}

三角形的处理这里需要用到四个CSS知识点：:after：伪元素

position: absolute：绝对定位

border：边框，没错就是边框

先看整体样式如下：.time-row:after {

content: '';

height: 0;

width: 0;

position: absolute;

display: block;

border-width: 0.625rem 0.75rem 0.625rem 0;

border-style: solid;

top: 0.8rem;

left: 8px;

border-color: transparent #1abc9c14 transparent;

}

这两段样式组合起来就是一个气泡框了。绝对定位好说，伪元素虽然用得少但这俩看看文档也就明白了。但是这个边框，我第一知道还能这么用，好神奇(本人后端狗一枚，前端大神别嫌我菜)。

通常咱们对边框的印象就是给div盒子加个边框线条，但是它还能绘制各种图形出来，比如下面这段代码：

body{

margin: 100px

}

.border-test {

height: 0;

width: 0;

border-width: 100px 100px 100px 100px;

border-style: solid;

border-color: #1abc9c #ffc107 #e26d6d #28a745;

}

效果如下：

这段代码理解了就明白了上面那个三角形是怎么绘制出来的了，首先将div盒子大小绘制为0，然后使用实线边框，再使用 border-width 和 border-color 分别指定四个边框的宽度和颜色，效果就出来了。

回到气泡里的三角形，只看几个关键参数(为了演示更加直观我将边框的宽度数值和颜色做了调整)：.time-row:after {

content: '';

height: 0;

width: 0;

border-width: 100px 100px 100px 0;

border-style: solid;

border-color: #1abc9c #ffc107 #e26d6d;

}

这里指定了上右下三个边框宽度为100px，左边框为0，那么实际效果如下：

看到这里是不是就明白了，开篇展示的气泡样式的那个三角形，就是将红绿两个边框设置为透明，只留下黄色边框效果就出来了。

是不是特别神奇，边框还能这么用。其实用边框用得好，组合起来还可以画出各种各样的神奇的图案出来。

最后，会话气泡完整的代码如下：

body {

margin: 100px 100px 100px 200px;

}

.bubble {

background: #0e90d2;

padding: 0.625rem 0.75rem;

overflow: hidden;

border-radius: 10px;

margin-left: 10px;

height: 200px;

}

.border-test {

height: 0;

width: 0;

border-width: 40px 40px 40px 0;

border-style: solid;

border-color: transparent #0e90d2 transparent;

position: absolute;

top: 140px;

left: 170px;

}

加油，继续学习！