使用CSS可以制作三角形、圓形、半圓形、平行四邊形、扇形以及一些復(fù)雜的圖形效果。先來看看三角形、圓形、半圓形、扇形這些簡(jiǎn)單的圖形實(shí)現(xiàn)。
一、三角形、梯形、圓形、半圓形、扇形的實(shí)現(xiàn)
關(guān)于三角形
通過使用border制作三角形來看，利用border將一個(gè)div元素分為四部分；只需要保證border上下左右一邊的邊框是有色，其余三邊為透明色即可制作出三角形；而當(dāng)改變border上下左右的值時(shí)，所制作的三角形會(huì)有不同的角度。
來看一下：
.test {
width: 0;
height: 0;
border-color: red green blue pink;
border-style: solid;
border-width: 20px;
}
這是使用border的四個(gè)邊框都置為有色，并且寬度大小相同制作出的四個(gè)直角三角形。改變四個(gè)邊框的大小，可以看到四個(gè)角度不同的三角形；
.test {
width: 0;
height: 0;
border-color: red green blue pink;
border-style: solid;
border-width: 20px 25px 10px 50px;
}
- 正三角
.test {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid pink;
}
- 正梯形
.test {
width: 100px;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid pink;
}
思路： 在正三角的基礎(chǔ)上給元素加個(gè)寬度。
- 正直角
.test {
width: 0px;
height: 0px;
border-bottom: 100px solid pink;
// 不是 border-right: 100px solid pink; 這樣的話元素會(huì)沒有高度
border-left: 100px solid transparent;
}
關(guān)于矩形
平行四邊形
.test {
width: 100px;
height: 100px;
transform: skew(-20deg);
background-color: pink;
}
思路： 對(duì)正方形利用skew在x軸上傾斜變換即可得到一個(gè)平行四邊形；但是這時(shí)候容器內(nèi)部的文字也是傾斜的，可以在內(nèi)部加一層容器，進(jìn)行逆向傾斜。
.test {
width: 100px;
height: 100px;
transform: skew(-20deg);
background-color: pink;
}
.test div {
transform: skew(20deg);
}
關(guān)于圓形
一個(gè) div 的寬高相等，并且利用 CSS3 中的border-radius屬性，其值設(shè)為（大于或等于）寬度或高度的一半（或者直接設(shè)置為 50% ），即為圓。
原理：寬高相等、四個(gè)角都是圓角：四個(gè)角的取值為50%。
這里當(dāng)border-radius屬性值指定為大于邊長(zhǎng)的一半，同樣可以生成一個(gè)圓的原因是：
當(dāng)任何兩個(gè)相鄰邊框半徑之和超過了邊框盒的尺寸，客戶端必須按比例減小所有邊框半徑的值，直到它們相互之間沒有重疊。
① 圓角的內(nèi)徑和外徑
我們?cè)O(shè)置的border-radius的值是指外半徑，內(nèi)半徑=外半徑減去border寬度。因此，當(dāng)border-radius的值小于或等于 border 的寬度時(shí)，邊框內(nèi)部將不具有圓角效果。
.test {
width: 100px;
height: 100px;
border: 30px solid black;
border-radius: 30px;
}
② 關(guān)于border-radius屬性值
上圖圓角代碼為：border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
border-radius屬性是來設(shè)置一個(gè) div 的四個(gè)圓角的形狀的，每一個(gè)圓角需要2個(gè)值，這兩個(gè)值是用來定義圓角形狀的 X / Y 軸上的半徑。順序遵守 TRBL（Top-Right-Bottom-Left） 原則，/斜杠前是水平方向（ X 軸）圓角半徑，斜杠后是垂直方向（ Y 軸）圓角半徑。
如果沒有/斜杠，表示圓角的水平和垂直半徑的值相等（注意這里是值相等，而不是相等：如果設(shè)的是px值，那水平和垂直半徑是相等的。但如果設(shè)的是百分比值，那說明水平垂直半徑有相同縮放比例，但不代表縮放后兩個(gè)半徑的px值相等。）例如：
border-radius的百分比值是相對(duì)于元素的寬高計(jì)算的，也就是說元素為寬高為 100px 和 200px時(shí)，border-radius：50％;相當(dāng)于border-radius：50px / 100px; (雙方50％)：
.test {
width: 100px;
height: 200px;
background: pink;
//border: 30px solid black;
border-radius: 50%;
}
- 橢圓形
.test {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 50%;
// border-radius: 100px / 50px;
}
- 半圓
.test {
width: 100px;
height: 50px;
border-radius: 50% /100% 100% 0 0;
// border-radius: 50px 50px 0 0;
// border-radius: 100px 100px 0 0; ??????????
background-color: pink;
}
思路：左上角、右上角的值為寬度的一半or等于高度值大小（左上角、右上角的值為寬度值大?。?，右下角、左下角的值不變（等于0）；并且，一邊邊長(zhǎng)要是另一邊邊長(zhǎng)的一半大小。
這里用百分比值比較方便，并且很容易明白：左上角和右上角的半徑應(yīng)該都是該形狀寬度的100%，并且水平方向的左右半徑應(yīng)該是50%，因此，垂直方向的border-radius的值應(yīng)該是100% 100% 0 0。用此百分比值方法可以畫出半橢圓，只需要改變?cè)貙挾戎挡煌纯伞?/p>
- 半橢圓
.test {
width: 100px;
height: 250px;
border-radius: 50% /100% 100% 0 0;
background-color: pink;
}
- 四分之一圓
.test {
width: 100px;
height: 100px;
border-radius: 100% 0 0 0;
background-color: pink;
}
思路：元素寬高一致，只需要其中一個(gè)圓角水平和垂直方向占據(jù)100%半徑，而其它四個(gè)則沒有圓角（為0）即可。
二、復(fù)雜圖形
- 核輻射警告標(biāo)志
<div id="warning">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
</div>
#warning {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
#warning .bg {
position: absolute;
top: -74px;
border-top: 174px solid yellow;
border-bottom: 174px solid black;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#warning .bg:nth-child(1) {
transform: rotate(0deg);
}
#warning .bg:nth-child(2) {
transform: rotate(120deg);
}
#warning .bg:nth-child(3) {
transform: rotate(-120deg);
}
思路：使用border構(gòu)造相間的三角形，然后使用overflow-hidden和border-radius剪裁成圓。
首先利用border-top和border-bottom構(gòu)造上下兩個(gè)角度為60°三角形: 三角形的底邊長(zhǎng)為容器的寬度值利用三角函數(shù)算出三角形的高約為174px; 為了讓上下兩個(gè)三角形正好對(duì)稱防止與圓形正中間，使兩個(gè)三角形整體向上移動(dòng)74px，使每個(gè)三角形垂直方向占據(jù)圓形容器直徑的一半100px; 最后將其旋轉(zhuǎn)即可。
- .........有待更新
