CSS现尖角对话框或带尖角的导航

CSS现尖角对话框或带尖角的导航

最近在设计管理系统前端的信息显示。因为看到很多UI设计的信息显示都由带尖角的对话框组成,所以我也想试试手。浏览一些网上的资料之后,大概明白了怎么回事。

尖角对话框的难度在于那个吐出来的尖角,这个效果具体的实现方法有很多。最容易想到的是用图片来实现,这方法最初我也想到了,但是一想到图片所占用的服务器空间,我就否定了这个思路。经过一段时间的查询我发现还有两种思路。1.使用纯CSS实现。2.使用字符来实现。
由于使用字符在不同浏览器显示效果不同,所以我选择使用CSS实现。基本原理是:先添加一个span块或div块,样式长和宽设置为0。设置boder,只将需要的方向的颜色设置成和父div一样的颜色,其他方向设置为inherit。当然position要设置为absolute,要点是计算块所在的位置。

CSS代码如下:
 .messageDetails em
   {
      width:0; 
      height:0; 
      font-size:0; 
      border-width:8px; 
      border-style:solid; 
      border-color:transparent white transparent transparent; 
      _border-color:white #f3961c white white; 
      overflow:hidden; 
      position:absolute; 
      top:17px;
      left:-16px;
      font-size:0; line-height:0;
   } 


   .org_bot_cor{
    width:0; 
    height:0; 
    font-size:0; 
    border-width:10px; 
    border-style:solid; 
    border-color:transparent hsla(182, 74%, 43%, 0.6) transparent transparent; 
    _border-color:white #f3961c white white; 
    overflow:hidden; 
    position:absolute; 
    top:15px;
    left:-21px;
    line-height:0;
   }

HTML代码如下:

  <div class="messageDetails" >

                <span class="org_bot_cor"></span>
                <em></em>
  </div>

效果:
这里写图片描述
(这里用了两个块重叠为了达到外侧的蓝色边框效果)

这里写图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

cuihuang2014

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值