纯CSS实现气泡对话框尖角处理方案

  发布时间:2017-06-26 16:02:06   作者:佚名   我要评论

这篇文章主要介绍了纯CSS实现气泡对话框尖角处理的实现代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

先来看一下效果图:

简单粗暴上代码:
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到了没有?

相关文章

  • JS+CSS3实现的确认框和对话框弹出并关闭特效源码

    是一段通过CSS和JS代码来实现确认框和对话框特效代码,点击相关图标会自动弹出确认框和对话框的无刷新遮罩层,并分别有确认、取消等按钮,点击后,该确认框和对话框就会自
    2016-09-07
  • CSS3制作气泡对话框的实例教程

    这篇文章主要介绍了CSS3制作气泡对话框的实例教程,同时讲到了对气泡的垂直居中的设定技巧,需要的朋友可以参考下
    2016-05-10
  • CSS3实现可兼容移动端的超酷弹出对话框效果源码

    这是一款基于HTML5和CSS3的弹出对话框,一共有4种类型,每种对话框弹出的时候均带有一定的动画特效,比如成功时候的动画和加载时候的动画,都非常不错。适合在移动端使用。
    2015-12-08
  • jQuery结合Css3制作的多风格轻量级弹出动感对话框插件特效源码

    jQuery结合Css3制作的多风格轻量级弹出动感对话框插件特效源码,是一段非常适合网站登录或注册以及需要填写内容时使用的对话框代码,本段代码可以弹出几十种具有动画特效的
    2014-10-30
  • 用纯css3和html制作泡沫对话框实现代码

    泡沫对话框是一种比较流行的趋势因为它改变了传统,通常情况下都是使用html和javascript或者是图片来实现,接下来为大家介绍下使用css3配合html来实现一些简单的泡沫对话框
    2013-03-21
  • 纯CSS代码实现各类气球泡泡对话框效果

    利用CSS的border属性可以生成一些图形,例如三角或是圆角。纯粹的CSS2的内容,没有兼容性的问题,我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS
    2010-12-27
  • CSS实现对话框小尾巴功能

    对话框小尾巴,估计大家在实际开发中应该经常遇到过,省事点的就是叫设计小姐姐给切个带小尾巴的背景图,那不省事的呢?这篇文章主要介绍了CSS对话框小尾巴,需要的朋友可以
    2019-05-16

最新评论