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

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

下面的代码是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

这个是尖角在右边的文章源自飞牛士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

文章源自飞牛士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

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