您的位置：首页 > Web前端 > CSS

CSS制作箭头图标代码(圆，三角形，椭圆)

2016-03-30 11:07 816 查看

css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧

圆：

.yuan{

width:100px;

height:100px;

-moz-border-radius:50%;

-webkit-border-radius:50%;

border-radius:50%;

background-color:red;

}

<div class="yuan"></div>

椭圆

.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>

箭头：

.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 箭头图标

相关文章推荐

新的分享

章节导航