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

前端开发中会使用到各种各样的箭头，有时候不断替换图片实在麻烦，掌握这些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>

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

css 各个方向渐变（从左到右、从上到下、从左上角到右下角）
css 各个方向渐变(从左到右.从上到下.从左上到左下) 从左到右 HTML代码: <div class="bodyDiv"></div> css代码: . ...
解答03：Smith圆为什么能“上感下容左串右并”？
更多关注:微信公众号"硬件大熊" 传输线的阻抗需求有很多种,如50Ω.75Ω.90Ω.100Ω.120Ω等.归一化阻抗实际上是建立了一套"通杀"阻抗的方法,即虽 ...
通过键盘上的方向键（上，下，左，右) 控制按键分别向对应的方向移动
添加监视器,通过键盘上的方向键(上,下,左,右) 控制按键分别向对应的方向移动写在前面(可能不同版本的包不同) 编写主类,设置窗口大小 public class W {public static v ...
宗地从上到下从左到右西北角顺时针界址点编码、宗地界址点成果表、宗地四至情况说明、宗地四至(东西南北)提取、界址线走向说明
一.宗地界址点编码:从上到下从左到右每宗西北角顺时针编码,可根据界址点分类类型计算序号前面的字母. 二.界址点成果表:每一宗地生成一个界址点成果表.xls,西北角界址点开始顺时针填写界址点,首先填写宗 ...
css添加边框阴影上、下、左、右详解
Css边框阴影:box-shadow属性对于这个属性,总是记了又忘,忘记了又看百度,今天总结一下: 语法: box-shadow: h-shadow v-shadow blur spread col ...
Appium swipe之屏幕上、下、左、右滑动
在appium 的appium\webdriver\extensions\action_helpers.py下提供了一个可以上下左右滑动的方法:swipe() 这个方法用起来到也比较简单,首先获取屏幕 ...
Unity3D_(游戏)控制物体的上、下、左、右移动
通过键盘上↑.↓.←.→实现对物体的控制 using System.Collections; using System.Collections.Generic; using UnityEngine;p ...
android 设置textview 左边,Android设置图片在TextView上、下、左、右
一种是在布局文件中的设置 android:drawablePadding="5dp"//图片与文案距离 android:drawableBottom="@drawable ...
OpenCASCADE(OCC) 实现模型线框和实体显示模式的切换以及视角的自由切换——工具栏按钮版（线框显示、实体显示、上、下、左、右、前、后的切换）
添加按钮事件找到*****View类,右击属性,添加之前定义好的按钮命令函数(add Command): 逐个添加完命令之后,*****View.h中会出现这几个消息函数: 分别对它们进行实现: / ...

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

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

最新文章

热门文章