您的位置：首页 > Web前端 > CSS

css小技巧，如何制作一个箭头符号

2015-03-13 11:34 597 查看

首先上图：

第一种方法大家可能想到了，就是用背景图片制作箭头符号，但是下面介绍的不是这种方法。

在介绍通过border制作箭头符号之前，先看下下面的css代码：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
div.button {
background: #B1B1B1;
color: #FFF;
font-weight: bold;
border: 10px solid #DFDFDF;
border-right-color: black;
border-left-color: red;
border-top-color: yellow;
border-bottom-color: green;
width:100px;
}
</style>
</head>

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

</html>

显示效果：

那么大家看到上面的div的宽度为100px，没有设置高度，上下border所占高度为20px，那么这个div高为20px.如果将长度100px改为0px，是什么效果呢，如下图：

那么设置箭头符号如何做，大家就应该很清楚了

1、我想设置箭头向上的arrow,只需要下边框设置自己想要的非透明颜色（绿色部分），其他左、上、右边框设置为透明，就能获得我们想要的效果，其它三类方向的边框类似做法。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
div.arrow1{
background-color:transparent;
width:0px;
font-weight: bold;
border:10px solid transparent;
border-top-color: #666;
margin:20px;
}
div.arrow2{
background-color:transparent;
width:0px;
font-weight: bold;
border:10px solid transparent;
border-bottom-color: #666;
margin:20px;
}
div.arrow3{
background-color:transparent;
width:0px;
font-weight: bold;
border:10px solid transparent;
border-left-color: #666;
margin:20px;
}
div.arrow4{
background-color:transparent;
width:0px;
font-weight: bold;
border:10px solid transparent;
border-right-color: #666;
margin:20px;
}
</style>
</head>

<body>
<div  class="arrow1"></div>
<div  class="arrow2"></div>
<div  class="arrow3"></div>
<div  class="arrow4"></div>
</body>

</html>

2、组合做四种border生成自己想要方向的边框

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
div.arrow4{
background-color:transparent;
width:0px;
font-weight: bold;
border:8px solid transparent;
border-right-color: #666;
border-bottom-color: #666;
margin:20px;
}
</style>
</head>

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

</html>

上面是组合右下边框设置成自己想要的箭头符号如图：

，箭头大小可以通过border-width控制

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航