采用css3的语言框效果

浏览数：27 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<title>采用css3的语言框效果</title>
<style>
.wrap{position:relative;}
.bd{
    background:#BDCEEF;width:250px;height:80px;padding:10px;position:relative;z-index:2;
    box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /* 阴影 */
    -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
    /*filter: progid:DXImageTransform.Microsoft.Shadow(color=‘#666666‘, Direction=145, Strength=3)*/ /* ie的阴影滤镜 */
    border-radius: 5px;  /* 圆角 */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.cor{
    position:absolute;
    z-index:2;
    width:40px;
    height:40px;
    background:#BDCEEF;
    left:30px;bottom:-20px;
    transform: skewY(-45deg); /* 斜切实现尖角  */
    -o-transform: skewY(-45deg);
    -webkit-transform: skewY(-45deg);
    -moz-transform: skewY(-45deg);
}
.cor_s{
    z-index:1;
    box-shadow: 5px 8px 11px rgba(0,0,0,0.4);  /* 尖角处的阴影 */
    -webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
/* 对ie实行人道处置 */
.cor{
    width:0;height:0;bottom:-30px;overflow:hidden;background:transparent;
    border:20px solid transparent;
    border-top-color:#BDCEEF;
    border-left-color:#BDCEEF;
}
</style>
<![endif]-->
</head>
<body>
<div class=‘wrap‘>
    <div class=‘bd‘></div>
    <div class="cor"></div>
    <div class="cor cor_s"></div>
</div>
</body>
</html>