纯html+css实现向上向下向左向右，空⼼实⼼箭头。 前端开发中会使⽤到各种各样的箭头，有时候不断替换图⽚实在⿇烦，掌握这些css⼩技巧，轻松实现各种箭头。
<!DOCTYPE html>
<html>
<head>
<meta chart="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-bottom"></span>
<span class="arrow-left"></span>
</div>
</body>
</html>
/* 空⼼箭头 */
<!DOCTYPE html>
<html lang="en">
<head>
显示器突然黑屏<meta chart="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 {
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;
/
*兼容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>
<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 chart="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;
