本文摘自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 box-direction属性怎么用
css的语法结构是什么？
css表格怎么设置中间对齐
css中auto是什么意思
css box-pack属性怎么用
css如何设置链接颜色
css不显示图标怎么办
css如何实现文字不能选中
css3混合模式使用详解
vs中css缩进设置如何调整
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 纯css实现小箭头或三角形标志
