css製作的圓，三角形，橢圓，箭頭表徵圖，css箭頭

css製作的圓，三角形，橢圓，箭頭表徵圖，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>

 

本文