使用CSS制作箭头符号的方法

　　介绍

这篇文章主要介绍了使用CSS制作箭头符号的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

箭头符号我们是经常可以看到的,那么我们如何在不利用图像的情况下使用CSS制作箭头符号呢?

话不多说,下面我们直接来看正文~

<强>用CSS制作的箭头图标的方法

只需要使用CSS就可以创建箭头而不需要利用图像

首先,让我们来看看如何实现一个箭头,我将来制作一个从左上角到右下角的L形箭头。

<强>一个直角转弯的箭头。

代码如下

HTML代码

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞 　　& lt; title> CSS arrow 　　& lt;链接rel=皊tylesheet"类型=拔谋?css"href=https://www.yisu.com/zixun/" sample.css "> 　　 　　头 　　身体<> 　　
　　 　　

CSS代码

样本。css

.arrow { 　　位置:相对; 　　宽度:200 px; 　　高度:50 px; 　　border-top: 8 px固体# 5 bc0de; 　　边境:8 px固体# 5 bc0de; 　　box-sizing: border-box; 　　} 　　{后.arrow:: 　　内容:““; 　　位置:绝对的; 　　底部:-14 px; 　　右:-17 px; 　　border-top: 14 px固体# 5 bc0de; 　　border-left: 14 px固体透明; 　　边境:14 px固体透明; 　　}

运行结果

在浏览器上显示如下效果

使用CSS制作箭头符号的方法

接下来介绍的几种箭头符号的制作HTML代码与上述相同,我们主要通过更改CSS代码来实现

<强>三角形的箭头

CSS代码

.arrow { 　　位置:相对; 　　显示:inline-block; 　　填充:0 0 0 16 px; 　　颜色:# 000; 　　vertical-align:中间; 　　文字修饰:没有; 　　字体大小:15 px; 　　} 　　 　　{前.arrow:: 　　位置:绝对的; 　　上图:0; 　　底部:0; 　　左:0; 　　保证金:汽车; 　　内容:““; 　　vertical-align:中间; 　　box-sizing: border-box; 　　宽:12 px; 　　高度:12 px; 　　边界:1 px固体# ff0000; 　　-webkit-border-radius: 25%; 　　这个特性:25%; 　　} 　　 　　{后.arrow:: 　　位置:绝对的; 　　上图:0; 　　底部:0; 　　左:0; 　　保证金:汽车; 　　内容:““; 　　vertical-align:中间; 　　左:5 px; 　　box-sizing: border-box; 　　宽度:3 px; 　　高度:3 px; 　　边界:3 px固体透明; 　　border-left: 3 px固体# ff0000; 　　}

运行效果如下

将显示一个带有红色三角形的图标

使用CSS制作箭头符号的方法

<强>“大于号”的箭头

CSS代码

.arrow { 　　位置:相对; 　　显示:inline-block; 　　padding-left: 20 px; 　　} 　　 　　{前.arrow:: 　　内容:& # 39;& # 39;; 　　宽度:6 px; 　　身高:6 px; 　　边界:0 px; 　　border-top:固体2 px # 5 bc0de; 　　边境:固体2 px # 5 bc0de; 　　-ms-transform:旋转(45度); 　　-webkit-transform:旋转(45度); 　　变换:旋转(45度); 　　位置:绝对的; 　　上图:50%; 　　左:0; 　　margin-top: 4 px; 　　}

运行结果

在浏览器上运行效果如下

使用CSS制作箭头符号的方法

在网页上这个箭头符号是经常可以用到的

<强>制作向上的箭头

CSS代码

.arrow { 　　宽度:0 px; 　　边框颜色:# d9534f; 　　边框样式:固体; 　　边框宽度:30 px; 　　border-left-color:透明; 　　border-top-color:透明; 　　border-right-color:透明; 　　}

运行效果

在浏览器上显示如下效果

使用CSS制作箭头符号的方法

<强>最后我们来看一下传统向右的箭头符号

CSS代码

。箭头{ 　　显示:inline-block; 　　高度:40像素; 　　宽度:80 px; 　　background - color: # 5 bc0de; 　　位置:相对; 　　上图:40像素; 　　} 　　 　　.arrow:{之前 　　位置:绝对的; 　　内容:““; 　　宽度:0; 　　高度:0; 　　边界:60 px固体透明; 　　border-left: 60 px固体# 5 bc0de; 　　左:80 px; 　　前:-37像素; 　　}

使用CSS制作箭头符号的方法