Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS3不用图片写出圆角和三角形气泡效果

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

发布时间:2020-05-09   编辑:www.jquerycn.cn
jquery中文网为您提供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;
}

您可能感兴趣的文章:
CSS+Jquery实现页面圆角框方法大全
Jquery ui css framework
分享几个超级震憾的图片特效
基于jQuery UI CSS Framework开发Widget的经验
jQuery圆角插件 jQuery Corners
基于jquery的气泡提示效果
jquery.cvtooltip.js 基于jquery的气泡提示插件
jquery 圆角遮罩图片实现图片圆角
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
DIY jquery plugin - tabs标签切换实现代码

[关闭]