本文摘自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处理长短文本内容的几种小技巧(值得收藏)
利用css完成一个悬停过渡动画的项目(超级简单)
css如何禁止复制
css是利用什么xhtml标记构建网页布局
css注释方式是什么
css浮动怎么做
css中文字相关属性的介绍
css如何实现滑动门效果
css h1不占一行怎么办
css transition-delay属性怎么用
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯css实现小箭头或三角形标志