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

技术文档63912阅读模式

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

下面的代码是CSS的,可以复制到你的CSS文件:文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

 .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>就可以达到效果了。如下图:文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

纯CSS3制作带尖角的气泡对话框实例特效代码这个是尖角在右边的文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

如果要在左边,调整相关的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>就可以达到效果了。如下图:文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

纯CSS3制作带尖角的气泡对话框实例特效代码文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

相关的颜色调整,可以自行调试到你满意为止。文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

当然,你可以结合区块编辑器达到更好的效果。文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

比如:文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

 文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

纯CSS3制作带尖角的气泡对话框实例特效代码文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html 文章源自飞牛士feinews.com飞牛士 FeiNews-https://www.feinews.com/27454.html

评论  6  访客  3  作者  3
    • ejsoon
      ejsoon 3

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

        • 飞牛
          飞牛

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

        • 征铎
          征铎 0

          这个好!样式也好看

            • 飞牛
              飞牛

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

            • 小彦
              小彦 0

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

            匿名

            发表评论

            匿名网友 填写信息

            :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

            确定