纯CSS3制作带尖角的气泡对话框实例特效代码

今天飞牛在写博文的时候,突然间想着,如果有写博文能用对话框的形式写出来,也是很有特色的。然后上网找出找相关教程,经过自己的测试,效果还不错,感兴趣的朋友可以参考下。

下面的代码是CSS的,可以复制到你的CSS文件:

 .fnrightsay{
        background-color: #0000000D;
        margin:50px auto;padding:16px;
        width:80%;
        border-radius: 10px;line-height: 25px;
        position: relative;
    }
    .fnrightsay::before{
        content:" ";
        border-left: 10px solid #0000000D;
        border-top:10px solid transparent;
        border-right:0px solid #0000000D;
        border-bottom:10px solid transparent;
        position: absolute;right:-10px;top:18px;
    }

在你需要用到的地方用插入<div class="fnrightsay">Hello World !Feinews.com</div>就可以达到效果了。如下图:

纯CSS3制作带尖角的气泡对话框实例特效代码这个是尖角在右边的

如果要在左边,调整相关的border就可以了。

.fnleftsay{
        background-color: #8DD2FC3B;
        margin:50px auto;padding:16px;
        width:80%;
        border-radius: 10px;line-height: 25px;
        position: relative;
    }
    .fnleftsay::before{
        content:" ";
        border-left: 0px solid #8DD2FC3B;
        border-top:10px solid transparent;
        border-right:10px solid #8DD2FC3B;
        border-bottom:10px solid transparent;
        position: absolute;left:-10px;top:18px;
    }

在你需要用到的地方用插入<div class="fnleftsay">Hello World !Feinews.com</div>就可以达到效果了。如下图:

纯CSS3制作带尖角的气泡对话框实例特效代码

相关的颜色调整,可以自行调试到你满意为止。

当然,你可以结合区块编辑器达到更好的效果。

比如:

 

纯CSS3制作带尖角的气泡对话框实例特效代码

© 文章系本站作者 飞牛 原创发布于「飞牛士 FeiNews」,文章授权后方可转载,请勿侵权!

(0)

猜你喜欢

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(6条)

  • ejsoon
    ejsoon 2022-11-29 07:38

    如果能做成在線生成,在線批量轉換,就更好了!

    • 飞牛
      飞牛 2022-11-29 10:15

      @ejsoon技术还没到那个层次哈,我只是修修补补美化而已。

  • 征铎
    征铎 2022-11-26 01:15

    这个好!样式也好看

    • 飞牛
      飞牛 2022-11-26 03:44

      @征铎嗯,也是我调试了好久得出的算是经验之谈吧,具体如果有什么需要帮助的,可以联系的,虽然不是代码大佬,但是提前走了一次弯路,知道怎么走最先到达。

  • 小彦
    小彦 2022-11-25 21:41

    哈哈,个站的聊天功能就是这么做的~