教程集 > CSS教程 > 经典实例 > 正文 CSS3不用图片写出圆角和三角形气泡效果

CSS3不用图片写出圆角和三角形气泡效果

发布时间：2020-05-09 编辑：jiaochengji.com

教程集为您提供CSS3不用图片写出圆角和三角形气泡效果等资源，欢迎您收藏本站，我们将为您提供最新的CSS3不用图片写出圆角和三角形气泡效果资源

CSS3制作带边框的三角形气泡效果，以往制作这样的效果，都是使用image图片，但是现在只需要CSS就能实现这样的效果，使用这样制作的三角形边框不知道怎么加，不过可以使用相对定位实现这样的效果。

效果如下

$\'CSS3不用图片写出圆角和三角形气泡效果\'$

代码如下

复制代码

CSS代码
.chat-bubble {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    font-family: 'Bangers', arial, serif;
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}

您可能感兴趣的文章：
CSS3不用图片写出圆角和三角形气泡效果
 CSS+Jquery实现页面圆角框方法大全
 IE7,IE8浏览器CSS实现正圆角效果代码
 html5和css3 动态气泡按钮的实现
 Jquery ui css framework
CSS3 border-radius 属性学习实例教程
 CSS3中clip-path属性和元素使用方法
 h5实现QQ聊天气泡的实例介绍
 在CSS3中制作小三角形效果代码
 如何使用canvas画一个圆？用canvas画圆的三种动态实现方法

上一篇：css float父元素自适应高度无效解决办法下一篇：针对IE6、7、8条件注释语句(不同版本IE显示用不用css)

[关闭]

CSS3不用图片写出圆角和三角形气泡效果

最近更新

浏览排行