10
26
2011
2

css之便签设计(个数:2)

练习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>
 
 
 
Category: Web设计 | Tags: css | Read Count: 2326
Avatar_small
λ 说:
2011年10月27日 00:02

啥?……把左上角去掉吧……

Avatar_small
wind 说:
2011年10月27日 22:12

呵呵,忘了说了,我是在ff7下测试的,用的有个代码是其专门的css属性,没有考虑别的浏览器,呵呵,so~


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com