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

2022年11月25日下午8:18 • 玩物志趣 • 阅读 227

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

下面的代码是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>就可以达到效果了。如下图：

这个是尖角在右边的

如果要在左边，调整相关的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>就可以达到效果了。如下图：

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

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

比如：

原创文章，作者：飞牛，如若转载，请注明出处：https://www.feinews.com/27454.html

发表回复

评论列表（6条）

ejsoon 2022年11月29日上午7:38

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

回复
- 飞牛 2022年11月29日上午10:15
  
  @ejsoon：技术还没到那个层次哈，我只是修修补补美化而已。
  
  回复
征铎 2022年11月26日上午1:15

这个好！样式也好看

回复
- 飞牛 2022年11月26日上午3:44
  
  @征铎：嗯，也是我调试了好久得出的算是经验之谈吧，具体如果有什么需要帮助的，可以联系的，虽然不是代码大佬，但是提前走了一次弯路，知道怎么走最先到达。
  
  回复
小彦 2022年11月25日下午9:41

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

回复
- 飞牛 2022年11月25日下午9:46
  
  @小彦：个站的管理员啊，欢迎欢迎。
  
  回复