如何使用CSS制作箭头符号

互联网 18-12-8

箭头符号我们是经常可以看到的，那么我们如何在不利用图像的情况下使用CSS制作箭头符号呢？本篇文章就来给大家介绍CSS制作箭头符号的方法。

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

用CSS制作的箭头图标的方法

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

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

一个直角转弯的箭头。

代码如下

HTML代码

<!DOCTYPE html> <html> 　　<head>   <meta charset="utf-8"> 　　　　<title>CSS arrow</title> 　　　　<link rel="stylesheet" type="text/css" href="sample.css">  　　<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 　　</head> 　　<body>  　　<div class="arrow"></div> 　　</body> </html>

CSS代码

.arrow{   position: relative;   width: 200px;   height: 50px;   border-top: 8px solid #5bc0de;   border-right: 8px solid #5bc0de;   box-sizing: border-box; } .arrow::after{   content: "";   position: absolute;   bottom: -14px;   right: -17px;   border-top: 14px solid #5bc0de;   border-left: 14px solid transparent;   border-right: 14px solid transparent; }

运行结果

在浏览器上显示如下效果

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

三角形的箭头

CSS代码

.arrow{   position: relative;   display: inline-block;   padding: 0 0 0 16px;   color: #000;   vertical-align: middle;   text-decoration: none;   font-size: 15px; }  .arrow::before{   position: absolute;   top: 0;   bottom: 0;   left: 0;   margin: auto;   content: "";   vertical-align: middle;   box-sizing: border-box;   width: 12px;   height: 12px;   border: 1px solid #ff0000;   -webkit-border-radius: 25%;   border-radius: 25%; }  .arrow::after{   position: absolute;   top: 0;   bottom: 0;   left: 0;   margin: auto;   content: "";   vertical-align: middle;   left: 5px;   box-sizing: border-box;   width: 3px;   height: 3px;   border: 3px solid transparent;   border-left: 3px solid #ff0000; }

运行效果如下

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

“大于号”的箭头

CSS代码

.arrow{   position: relative;   display: inline-block;   padding-left: 20px; }  .arrow::before{   content: '';   width: 6px;   height: 6px;   border: 0px;   border-top: solid 2px #5bc0de;   border-right: solid 2px #5bc0de;   -ms-transform: rotate(45deg);   -webkit-transform: rotate(45deg);   transform: rotate(45deg);   position: absolute;   top: 50%;   left: 0;   margin-top: -4px; }

运行结果

在浏览器上运行效果如下

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

制作向上的箭头

CSS代码

.arrow{   width: 0px;   border-color: #d9534f;   border-style: solid;   border-width: 30px;   border-left-color: transparent;   border-top-color: transparent;   border-right-color: transparent; }

运行效果

在浏览器上显示如下效果

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

.arrow {   display:inline-block;   height:40px;   width:80px;   background-color:#5bc0de;   position:relative;   top:40px; }  .arrow:before {   position:absolute;   content:"";   width:0;   height:0;   border:60px solid transparent;   border-left:60px solid #5bc0de;   left:80px;   top:-37px; }