CSS制作箭头图标代码(圆，三角形，椭圆)
网站建设 2021-07-03 08:15www.dzhlxh.cn网站建设
css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。狼蚁网站SEO优化给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧
圆：
CSS Code复制内容到剪贴板
- .yuan{
- width:100px;
- height:100px;
- -moz-border-radius:50%;
- -webkit-border-radius:50%;
- border-radius:50%;
- background-color:red;
- }
- <div class="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;
- }
- <div class="oval"></div>
箭头：
CSS Code复制内容到剪贴板
- .arrow{
- content: '';
- position: absolute;
- width: 30px;
- height: 30px;
- border: 10px solid #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;
- }
- <span class="arrow"></span>
三角形：
CSS Code复制内容到剪贴板
- .rencentle {
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-bottom: 100px solid red;
- }
- <div class="rencentle"></div>