本文摘自PHP中文网，作者V，侵删。
作为一名前端工程师，工作中免不了要使用css制作一些小箭头、三角形之类的标志。下面我就来为大家分享下纯css制作小箭头、三角形等标志的方法。
实现小箭头：
1 2 3 4 5 6 7 8 9 10 | .arrow{
width: 20px;
height: 20px;
margin-top: 50px;
margin-left: 50px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>
|
实现三角形：
1 2 3 4 5 6 7 8 9 | .triangle{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: red transparent transparent transparent;
transform:rotate(45deg);
}
<div class="triangle"></div>
|
（免费视频教程：css视频教程）
阅读剩余部分
相关阅读 >>
css text-decoration-line属性怎么用
css a为什么设不了宽度
css border-color属性怎么用？
css如何将图片并排
css怎么设置字体立体
一步步教你使用css制作一个简单美观的导航栏（代码详解）
css如何实现按钮居中显示
波浪的边框css怎么实现
css怎么实现平方
css punctuation-trim属性怎么用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 纯css实现小箭头或三角形标志
