css表示em效果,em标签结合css的border属性实现流行的倒三角效果

em标签结合css的border属性实现流行的倒三角效果

(2012-06-26 09:16:30)

分类：

前端

/p>

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

xmlns="http://www.w3.org/1999/xhtml">

em标签结合css的border属性实现流行的倒三角效果

a {color:#FFF;text-decoration:none;font-weight:bold;}

.box{ width:300px;

height:30px;background:#CCC;position:relative;top:100px;left:100px;padding:8px

0 0 12px; }

.to-top{display:block; overflow:hidden; width:0px; height:0px;

border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px

6px 6px; position:absolute; left:30px;

top:0;margin-top:-6px;}

.to-right{display:block; overflow:hidden; width:0px; height:0px;

border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0

6px 6px; position:absolute; right:0px;

top:30px;margin-right:-6px;}

.to-bottom{display:block; overflow:hidden; width:0px; height:0px;

border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px

0 6px; position:absolute; right:30px;

bottom:0;margin-bottom:-6px;}

.to-left{display:block; overflow:hidden; width:0px; height:0px;

border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px

6px 0 ; position:absolute; left:0;

bottom:30px;margin-left:-6px;}

href="#">CSS代码实例

class="to-bottom">

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。