css 实现小尖角聊天对话框带尖角的说话泡泡效果

网站建设 2021-07-03 07:55www.dzhlxh.cn网站建设

一、css 绘制实现小尖角聊天对话框,带尖角的说话泡泡,先给大家展示下效果图,感觉不错请参考实例代码。

二、效果

三、代码

css;toolbar:false"><style>
#talkbubble {
  width: 160px; height: 80px;
  background: red;
  position: relative;
  border-radius: 10px;
  margin-left:20px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%; 
  top: 26px;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>

补充:纯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在狼蚁网站SEO优化),最后通过调整绝对定位的参数(left,top)让其重合的天衣无缝。好了,大功告成啦,不知道你get到了没有?

总结

到此这篇关于css 实现小尖角聊天对话框带尖角的说话泡泡效果的文章就介绍到这了,更多相关css 尖角聊天对话框内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章,希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板