您现在的位置是：网站首页> 编程资料编程资料
纯CSS实现气泡对话框尖角处理方案_CSS教程_CSS_网页制作_
2021-09-10
1037人已围观
简介 这篇文章主要介绍了纯CSS实现气泡对话框尖角处理的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
先来看一下效果图：
简单粗暴上代码：
html：
less:
.dialog-box { position: relative; span { width:0; height:0; font-size:0; overflow:hidden; position:absolute; &.bot{ border-width: 15px; border-style: solid dashed dashed; border-color: transparent transparent #F9743A transparent; left: 15px; top: -29px; } &.top{ border-width:13px; border-style:solid dashed dashed; border-color:transparent transparent #fff transparent; left:17px; top:-25px; } } } 大白话讲解：
如果你想要其他方位的尖角，就调整boder-color的顺序（上，右，下，左）。
主要的原理大概是有两个一样形状，比例不同的小三角，一个和底色一样的实心三角bot，一个白色底的top，并且top是会盖在bot上面的，然后调整它们的大小（一般来说实心要比白色块大一点，这样才可以显示出有眼色的边边啊）。
最后想尽一切办法让它们重合（白色的top在上面，实心的bot在下面），最后通过调整绝对定位的参数（left，top）让其重合的天衣无缝。好了，大功告成啦，不知道你get到了没有？
相关内容
- css position定位属性_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css float属性_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css id选择器使用_动力节点Java学院整理 _CSS教程_CSS_网页制作_
- css简介_动力节点Java学院整理_CSS教程_CSS_网页制作_
- CSS深入教程之文字修饰的那点事_CSS教程_CSS_网页制作_
- 利用纯CSS3实现文字向右循环闪过效果实例（可用于移动端） _css3_CSS_网页制作_
- CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集_css3_CSS_网页制作_
- 浅谈CSS三栏布局的Ｎ种实现_CSS教程_CSS_网页制作_
- CSS中 opacity的设置影响了index（层数）的改变的问题总结（推荐）_CSS_网页制作_
- css几种解决inline-block间隙的方案(整理)_CSS教程_CSS_网页制作_
