您的位置: 首页  >  IT文章  >  css三角形上下左右实心空心尖角箭头

css三角形上下左右实心空心尖角箭头

分类: IT文章 • 2022-06-10 11:39:36 
平常在网页中，经常会有空心箭头，除了用图片外，可以用css来实现
/* 实心箭头 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实心箭头上下左右都有哦</title>
</head>
<body>
<style type="text/css">
.arrow {
margin: 100px auto;
width: 300px;
height: 150px;
}

.item {
float: left;
clear: both;
margin-bottom: 23px;
}
/* 向上的箭头 */

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

.arrow-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
/* 向下的箭头 */

.arrow-bottom {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向左的箭头 */

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

css三角形上下左右实心空心尖角箭头

/* 空心箭头 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css制作空心的上下左右的箭头</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

.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>

css三角形上下左右实心空心尖角箭头

/* 实心垂直三角形 */

<!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>

css三角形上下左右实心空心尖角箭头

相关推荐