Rumah >hujung hadapan web >html tutorial >css制作的圆,三角形,椭圆,箭头图标_html/css_WEB-ITnose

css制作的圆,三角形,椭圆,箭头图标_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:22:141423semak imbas

自从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 和按钮的圆角

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn