html图片不要角,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;

}