使用css3繪製畫圓,扇形,三角形的實現
阿新 • • 發佈:2020-07-17
css已經越來越強大了 ,可以使用它來繪製各種簡單的形狀,用於代替圖片顯示,這次的分享主要用到畫圓,扇形,三角形等知識點,由於IE9以上才支援圓角,暫時不考慮相容問題
css實現圓形
<div class="circle"></div>
<style>
.circle {
border-radius: 50%;
width: 80px;
height: 80px;
background: #666;
}
</style>
效果如下:
border-radius圓角的四個值按順序取值分別為:左上、右上、右下、左下。這裡只設置一個值,代表四個角的取值都為為50%
原理:
border-radius: 50% 彎曲元素的邊框以建立圓。
由於圓在任何給定點具有相同的半徑,故寬和高都需要保證一樣的值,不同的值將建立橢圓。
css實現扇形
1、利用border-radius,實現90度角的扇形:
<div class="sector"></div> <style> .sector{ border-radius:80px 0 0; width: 80px; height: 80px; background: #666; } </style>
效果如下:
原理:
左上角是圓角,其餘三個角都是直角:左上角的值為寬和高一樣的值,其他三個角的值不變(等於0)。
新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html
2、繪製任意角度的扇形
<div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div> </div> <!--*繪製一個85度扇形*/--p> <div class="shanxing shanxing2"> <div class="sx1"></div> <div class="sx2"></div> </div> <!--*繪製一個向右扇形,90度扇形*--> <div class="shanxing shanxing3"> <div class="sx1"></div> <div class="sx2"></div> </div> <!--*繪製一個顏色扇形 */--p> <div class="shanxing shanxing4"> <div class="sx1"></div> <div class="sx2"></div> </div> <!--/*繪製一個不同顏色半圓夾角 */--> <div class="shanxing shanxing5"> <div class="sx1"></div> <div class="sx2"></div> </div> <style> .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow; } .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*這個clip屬性用來繪製半圓,在clip的rect範圍內的內容顯示出來,使用clip屬性,元素必須是absolute的 */ border-radius: 100px; background-color: #f00; /*-webkit-animation: an1 2s infinite linear; */ } .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00; /*-webkit-animation: an2 2s infinite linear;*/ }
/*繪製一個60度扇形*/
.shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
/*繪製一個85度扇形*/
.shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
/*繪製一個向右扇形,90度扇形*/
.shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
/*繪製一個顏色扇形 */
.shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
/*繪製一個不同顏色半圓夾角 */
.shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0; </style>
效果如下:
/*繪製一個60度扇形*/
/*繪製一個85度扇形*/
/*繪製一個向右扇形,90度扇形*/
/*繪製一個顏色扇形 */
/*繪製一個不同顏色半圓夾角 */