<title> Cue box with Arrow shadow </title>
<style>
. wrap{position:relative;}
. bd{
Background: #BDCEEF; width:301px;height:101px;margin: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);
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
. cor,.cor_s{
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>
<body>
<div class= ' wrap ' >
<div class= ' BD ' ></div>
<div class= "Cor" ></div>
<div class= "cor_s" ></div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Hint box with arrow Shadow, CSS code, ie incompatible
