Feng's Blog

练习css用，呵呵~ 望大家点评！！

实现一

<div id="biankuang">
<div id="jiao"></div>
</div>
<style>
#jiao{
position:relative;
left:-25px;
top:-25px;
width:0px;height:0px;
border:40px solid transparent;
border-right-color:skyblue;
border-bottom-color:skyblue;
box-shadow:3px 3px 4px black;
}
#biankuang{
 width:300px;
 height:200px;
 box-shadow:3px 3px 4px black;
 background:skyblue;
 border-radius:10px;
 -moz-border-radius-topleft:60px;
 overflow:hidden;
 border:1px solid rgba(0,0,0,0.6);
}
</style>

实现二

<div id="note">
<div id="jiao"></div>
<div id="title"></div>
<div id="content"></div>
</div>
<style>
#jiao{
position:absolute;;
left:0px;
top:0px;
width:0px;height:0px;
border:42px solid transparent;
border-right-color:#76bdda;
border-bottom-color:#76bdda;
border-radius:0 0 10px 0;
z-index:1;
}
#title{
 top:0px;
 left:80px;
 position:absolute;
 background:skyblue;
 width:260px;
 height:80px;
 border-radius:6px 10px 0 0;
}
#note{
position:relative;
width:340px;
height:280px;
border-radius:10px;
}
#content{
 top:80px;
 left:0px;
 position:absolute;
 width:340px;
 height:200px;
 background:skyblue;
 border-radius:6px 0px 10px 10px;
}
</style>