码迷,mamicode.com
首页 > Web开发 > 详细

CSS箭头

时间:2015-10-15 12:33:17      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css的箭头代码</title>
<style>
div{margin:20px 0;}
.arrow_up{width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #2f2f2f; font-size:0; line-height:0;}
.arrow_down{width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #f00; font-size:0; line-height:0;}
.arrow_left{width:0; height:0; border-bottom:15px solid transparent; border-top:15px solid transparent; border-left:10px solid #0f0; font-size:0; line-height:0;}
.arrow_right{width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-right:60px solid #f0f; font-size:0; line-height:0;}
</style>

</head>

<body>
<div class="arrow_up"></div>

<div class="arrow_down"></div>

<div class="arrow_left"></div>

<div class="arrow_right"></div>

</body>
</html>

CSS箭头

标签:

原文地址:http://www.cnblogs.com/will-2008/p/4881839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!