css制作的圆，三角形，椭圆，箭头图标

自从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>

三角形：

.rencentle {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red;}<div class="rencentle"></div>

本文转自：http://www.manongjc.com/article/57.html

更多关于css制作图案的文章：

css border实现的三角形图案

css 巧用border属性制作各种图形(矩形，梯形，三角形)

css制作的圆，三角形，椭圆，箭头图标

css3 border-radius圆角盒子

去掉iphone Safari浏览器下input submit 和按钮的圆角

原标题：css制作的圆，三角形，椭圆，箭头图标

关键词：CSS