css-绘制消息提示框

xyc

     咱们继续之前说的css实现图形的效果方法，今天来说说消息提示框的实现方法。
     原理：一个圆角矩形加左边中间的一个小三角形。
     效果：
     
     HTML：
     

[HTML] 纯文本查看 复制代码

<div class="div"></div>

     css样式：
     

[CSS] 纯文本查看 复制代码

.div {
 width: 140px;
 height: 100px;
 margin: 30px 20px;
 float: left;
 background: #8867b9;
 position: relative;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
}
.div:before {
 content: "";
 width: 0;
 height: 0;
 right: 100%;
 top: 38px;
 position: absolute;
 border-top: 13px solid transparent;
 border-right: 26px solid #8867b9;
 border-bottom: 13px solid transparent;
}  

    以上就是消息提示框的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！