纯CSS实现气泡对话框尖角处理方案
发布时间:2017-06-26 16:02:06 作者:佚名 我要评论
这篇文章主要介绍了纯CSS实现气泡对话框尖角处理的实现代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
先来看一下效果图:
简单粗暴上代码:
html:
<div class="dialog-box"> <span class="bot"></span> <span class="top"></span> </div>
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到了没有?
相关文章
- 这是一个对话框插件,它主要用来卸载软件时的提示,特点在于,当用户选择保留和卸载后,对话框中间的表情会根据用户选择发生动态变化,非常可爱。需要的朋友前来下载2019-07-29
- 对话框小尾巴,估计大家在实际开发中应该经常遇到过,省事点的就是叫设计小姐姐给切个带小尾巴的背景图,那不省事的呢?这篇文章主要介绍了CSS对话框小尾巴,需要的朋友可以2019-05-16
- 泡沫对话框是一种比较流行的趋势因为它改变了传统,通常情况下都是使用html和javascript或者是图片来实现,接下来为大家介绍下使用css3配合html来实现一些简单的泡沫对话框2013-03-21
- 利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS2010-12-27
- 这篇文章主要介绍了css 实现小尖角聊天对话框带尖角的说话泡泡效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下2020-04-10
最新评论