话不多说,下面我们直接来看正文~
用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代码
sample.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; }
运转结果
在浏览器上显现以下结果
末了我们来看一下传统向右的箭头标记
CSS代码
.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; }
运转结果
在浏览器大将显现以下所示的结果
本篇文章到这里就悉数完毕了,更多相干的精彩内容人人能够移步到ki4网的CSS视频教程栏目进一步的进修!!!
以上就是怎样运用CSS制造箭头标记的细致内容,更多请关注ki4网别的相干文章!