纯html+css实现向上向下向左向右，空心实心箭头。

最新推荐文章于 2024-06-06 11:15:03 发布

石金豆

最新推荐文章于 2024-06-06 11:15:03 发布

阅读量1.6w

点赞数 6

文章标签：前端 css三角形 html css

本文链接：https://blog.csdn.net/qq_41864575/article/details/85266594

版权

前端开发中会使用到各种各样的箭头，有时候不断替换图片实在麻烦，掌握这些css小技巧，轻松实现各种箭头。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实心箭头上下左右都有哦</title>
</head>
<body>
<style type="text/css">

/* 向上的箭头 */

.arrow-top {
  width: 0;   
  height: 0;   
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent;
  border-bottom: 10px solid #217AFF; 
  font-size: 0;  
  line-height: 0; 
}
/* 向右的箭头 */

.arrow-right {
  width: 0;   
  height: 0;   
  border-left: 10px solid #217AFF;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  font-size: 0;  
  line-height: 0;
}
/* 向下的箭头 */

.arrow-bottom {
  width: 0;   
  height: 0;   
  border-left: 4px solid transparent;  /* 左边框的宽 */  
  border-right: 4px solid transparent; /* 右边框的宽 */  
  border-top: 7px solid #217AFF; /* 下边框的长度|高,以及背景色 */  
  font-size: 0;  
  line-height: 0; 
}
/* 向左的箭头 */

.arrow-left {
  width: 0;   
  height: 0;   
  border-left: 10px solid transparent;
  border-right: 10px solid #217AFF;
  border-bottom: 10px solid transparent;
  font-size: 0;  
  line-height: 0;
}
</style>
</head>
<body>
<div class="arrow">
<span class="arrow-top"></span>
<span class="arrow-right"></span>
<span class="arrow-bottom"></span>
<span class="arrow-left"></span>
</div>
</body>
</html>

/* 空心箭头 */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css制作空心的上下左右的箭头</title>
<style type="text/css">
.box {
width: 100px;
height: 500px;
margin: 0 auto;
background: white;
}

.arrow-box {
width: 30px;
height: 30px;
margin: 20px auto;
position: relative;
}
/*右箭头*/

.right {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
}

.right-arrow1,
.right-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
border-top: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-left: 10px white solid;
overflow: hidden;
}

.right-arrow1 {
left: 1px;
/*重要*/
border-left: 10px red solid;
}

.right-arrow2 {
border-left: 10px white solid;
}
/*左箭头*/

.left {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
/*兼容ie8-*/
}

.left-arrow1,
.left-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 5;
/*兼容ie8-*/
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-right: 10px white solid;
overflow: hidden;
}

.left-arrow1 {
border-right: 10px red solid;
}

.left-arrow2 {
left: 1px;
/*重要*/
border-right: 10px white solid;
}
/*上箭头*/

.top {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
/*兼容ie8-*/
}

.top-arrow1,
.top-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 5;
/*兼容ie8-*/
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px white solid;
overflow: hidden;
}

.top-arrow1 {
border-bottom: 10px red solid;
}

.top-arrow2 {
top: 1px;
/*重要*/
border-bottom: 10px white solid;
}
/*下箭头*/

.bottom {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
/*兼容ie8-*/
}

.bottom-arrow1,
.bottom-arrow2 {
width: 0;
height: 0;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 5;
/*兼容ie8-*/
border-bottom: 10px transparent dashed;
border-left: 10px transparent dashed;
border-right: 10px transparent dashed;
border-top: 10px white solid;
overflow: hidden;
}

.bottom-arrow1 {
top: 1px;
/*重要*/
border-top: 10px red solid;
}

.bottom-arrow2 {
border-top: 10px white solid;
}
</style>

<body>
<div class="box">
<p> 右箭头</p>
<div class="arrow-right arrow-box">
<b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
</div>
<p> 左箭头</p>
<div class="arrow-left arrow-box">
<b class="left"><i class="left-arrow1"></i><i class="left-arrow2"></i></b>
</div>
<p> 上箭头</p>
<div class="arrow-top arrow-box">
<b class="top"><i class="top-arrow1"></i><i class="top-arrow2"></i></b>
</div>
<p> 下箭头</p>
<div class="arrow-bottom arrow-box">
<b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
</div>
</div>
</body>
</html>

/* 实心垂直三角形 */

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.vertical_left_top {
display: inline-block;
position: absolute;
left: 0px;
top: 0px;
}

.vertical_left_top::before {
border: 25px solid;
border-color: red transparent transparent red;
display: inline-block;
content: '';
}

.vertical_right_bottom {
display: inline-block;
position: absolute;
left: 0px;
top: 70px;
}

.vertical_right_bottom::before {
border: 25px solid;
border-color: transparent red red transparent;
display: inline-block;
content: '';
}

.vertical_right_top {
display: inline-block;
position: absolute;
left: 0px;
top: 140px;
}

.vertical_right_top::before {
border: 25px solid;
border-color: red red transparent transparent;
display: inline-block;
content: '';
}

.vertical_left_bottom {
display: inline-block;
position: absolute;
left: 0px;
top: 210px;
}

.vertical_left_bottom::before {
border: 25px solid;
border-color: transparent transparent red red;
display: inline-block;
content: '';
}
</style>

<body>
<div class="vertical_left_top"></div>
<br />
<div class="vertical_right_bottom"></div>
<br />
<div class="vertical_right_top"></div>
<br />
<div class="vertical_left_bottom"></div>
</body>

</html>