CSS制作箭头图标代码(圆，三角形，椭圆)
2021-05-08 21:12:53 css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧
圆：
CSS Code复制内容到剪贴板
.yuan{width:100px;height:100px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:red;}<divclass="yuan"></div>
椭圆CSS Code复制内容到剪贴板
.oval{width:200px;height:100px;background-color:red;-moz-border-radius:100px/50px;-webkit-border-radius:100px/50px;border-radius:100px/50px;}<divclass="oval"></div>
箭头：
CSS Code复制内容到剪贴板
.arrow{content:'';position:absolute;width:30px;height:30px;border:10pxsolid#f5b24a;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);border-top:none;border-right:none;top:9px;}<spanclass="arrow"></span>
三角形：
CSS Code复制内容到剪贴板
.rencentle{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;}<divclass="rencentle"></div> 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 CSS制作箭头图标代码(圆，三角形，椭圆) 
最新文章
热门文章
猜你喜欢
