如何使用CSS制作箭头符号

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

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

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

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

　　一个直角转弯的箭头。

　　代码如下

　　HTML代码

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>CSSarrow</title>

　　<linkrel="stylesheet"type="text/css"href="sample.css">

　　<metahttp-equiv="Content-Type"content="text/html"charset="UTF-8">

　　</head>

　　<body>

　　<divclass="arrow"></div>

　　</body>

　　</html>

　　CSS代码

　　sample.css

　　.arrow{

　　position:relative;

　　width:200px;

　　height:50px;

　　border-top:8pxsolid#5bc0de;

　　border-right:8pxsolid#5bc0de;

　　box-sizing:border-box;

　　}

　　.arrow::after{

　　content:"";

　　position:absolute;

　　bottom:-14px;

　　right:-17px;

　　border-top:14pxsolid#5bc0de;

　　border-left:14pxsolidtransparent;

　　border-right:14pxsolidtransparent;

　　}

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56375.shtml