纯CSS实现一个气泡框

实现原理：主要通过CSS的border-color属性，结合::before、::after和position: absolute实现。

（1）画一个正方形或长方形的盒子，别忘记此盒子需加上position: relative，不然之后的绝对定位元素会相对于其余设了position: relative的父级元素或windom定位，绝对定位元素就会跑偏了。

<div class="div1"> 这是一个长方形的红色盒子 </div>

.div1{width: 300px;height: 200px;background: red;position: relative;
}

（2）开始重头戏，画个气泡框的三角形了，画之前来了解一下border-color这个属性。

border-color：用于设置上下左右四个边框的颜色。

例如border-color：red green blue yellow;分别代表了上、右、下、左边框的颜色。

现在出现了4个三角形，但我们只需要一个三角形，怎么办呢，那就把其余不要的3个三角形设成透明不就得了，

于是border-color:transparent transparent transparent pink;

现在三角形有了，长方形的框有了，用绝对定位拼凑起来不就是个气泡框了。

完整代码：

<div class="div1">这是一个长方形的盒子 </div>

.div1{width: 300px;height: 200px;background: red;margin: 0 auto;margin-top: 30px;position: relative;
}
.div1::before{content: '';width: 0;height: 0;border: 16px solid;position: absolute;top: 20px;left: -32px;border-color:  transparent green transparent transparent;
}

这个气泡框是不是很丑啊，丑就对了，丑你才会不满意我的作品，自己做一个，光看不练都是眼把式，但实际中很多气泡框中间是空白的，怎么办呢，好办，底色换成白色，加个border就ok了。

完整代码：

<div class="div1">这是一个长方形的盒子 </div>

.div1 {width: 300px;height: 200px;margin: 0 auto;margin-top: 30px;position: relative;border: 2px solid;
}
.div1::before {content: "";width: 0;height: 0;border: 16px solid;position: absolute;top: 20px;left: -32px;border-color: transparent #000 transparent transparent;
}
.div1::after {content: "";width: 0;height: 0;border: 14px solid;position: absolute;top: 22px;left: -26px;border-color: transparent #fff transparent transparent;
}

气泡框大功告成！！！！

纯CSS实现一个气泡框相关推荐

纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
纯CSS实现圆角矩形框
为什么80%的码农都做不了架构师?>>> 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果. 图一从 ...
html select 样式t调整_用纯css改变下拉列表select框的默认样式
**社区评论 ( Beta版 )** #0 危汤讽 2015-04-02 09:57:05 firefox浏览器支持不好,貌似是浏览器bug 回复 #1 林甩土 2015-04-03 09:06:57 ...
纯CSS实现对话气泡(MD.5)
在漫岛的注册成功引导页,有一个小姐姐讲述一些网站玩法规则,需要一个对话气泡效果,用纯CSS实现了一下,效果如下(点击图片放大看): 网站实际效果结合了动画体验比截图好,,做气泡不难,关键点在于三角形的 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
纯css实现一个族谱树
在做前端的时候,发现用到很多树的组件,但大多数的前端框架,都是左右树,并不是上下树,也就是族谱树. 那今天就给大家纯CSS实现一个族谱树. 先看看效果图: 参考代码: <!-- We will ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...

纯CSS实现一个气泡框

纯CSS实现一个气泡框相关推荐

最新文章

热门文章