首先上图：
第一种方法大家可能想到了，就是用背景图片制作箭头符号，但是下面介绍的不是这种方法。
在介绍通过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控制
时间： 2024-10-02 00:43:39