作為畫圓是一項(xiàng)前端css的基本功了术瓮，畫圓的思路是設(shè)置長(zhǎng)和寬相等康聂，那么呈現(xiàn)出來的是一個(gè)正方形，其次再讓正方形的邊框弧度為百分之五十胞四，就可以變?yōu)閳A形了恬汁，或者如果寫成和設(shè)置的長(zhǎng)和寬一半的長(zhǎng)度的話，也是可以的辜伟。
圓形代碼：<divclass="circular"></div>
.circular{
width:200px;
height:200px;
border-radius:50%;
background:red;
}
那么我稍微再改變一下氓侧，如果我們要畫個(gè)半圓，那么思路是什么呢导狡？就比如說约巷，我們現(xiàn)在畫個(gè)上半圓，那么我們就只要把長(zhǎng)不變旱捧，高變?yōu)殚L(zhǎng)的一般独郎，此時(shí)就變?yōu)榱艘粋€(gè)長(zhǎng)方形，border-radius的四個(gè)值枚赡，分別表示左上角氓癌、右上角、右下角贫橙、左下角贪婉，所以我們知道這個(gè)之后，就可以通過改變左上角和右上角的弧度讓它們?yōu)楦叩拈L(zhǎng)度料皇，讓右下角和左下角為0谓松，那么就能畫出我們所需要的上半圓了星压。
半圓形代碼：<divclass="semicircle"></div>
.semicircle{
width:200px;
height:100px;
border-radius:100px 100px00;
background:red;
}
由此践剂，我們繼續(xù)深入，如果是四分之一圓娜膘，我們能否實(shí)現(xiàn)逊脯，首先的思路就是，我們?cè)O(shè)置的長(zhǎng)和寬都是之前設(shè)置的一半竣贪，這樣做的原因军洼，你可以理解為之前的圓的四分之一，不就是長(zhǎng)和寬各一半么演怎，如果你想要的是左上角為半圓匕争，只要改變左上角的弧度和半徑一樣，其他三個(gè)角為0爷耀，就可以了甘桑。
四分之一圓的代碼：<divclass="quarterCircle"></div>
.quarterCircle{
width:100px;
height:100px;
border-radius:100px000;
background:red;
}
最后一個(gè)就是面試經(jīng)常被問到的題目，畫一個(gè)三角形，我的思路就是通過transparent跑杭，來實(shí)現(xiàn)铆帽，transparent的解釋是透明色，那么我們可以想一下德谅，如果我們的長(zhǎng)和寬都是0的話爹橱，我們可以通過邊框的粗細(xì)來填充長(zhǎng)和寬，相當(dāng)于就是把它們撐開窄做，那么又變得簡(jiǎn)單起來了愧驱，如果我讓底下的邊框?qū)挾仍O(shè)置為100px，那么是不是就可以認(rèn)為高就是100px浸策，那么我們?cè)偌觽€(gè)顏色-紅色冯键，就相當(dāng)于是一個(gè)為紅色的矩形，之后庸汗，我們?cè)O(shè)置左右的邊框?qū)挾纫矠?00px惫确，并且顏色為透明色，掩蓋掉之后蚯舱，就能變?yōu)槲覀兿胍娜切巍?/p>
三角形的代碼：<divclass="triangle"></div>
.triangle{
width:0px;
height:0px;
border-bottom:100px solid red;
border-left:100px solid transparent;
border-right:100px solid transparent;
}
