全目錄
本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：
- css揭祕實戰技巧- 背景與邊框 [一]
- css揭祕實戰技巧- 形狀 [二]
- css揭祕實戰技巧 - 視覺效果[三]
- css揭祕實戰技巧 - 字型排印[四]
- css揭祕實戰技巧 - 使用者體驗[五]
- css揭祕實戰技巧 - 結構與佈局[六]
- css揭祕實戰技巧 - 過渡與動畫[七]
前言
本節課要將的內容：
- 自適應橢圓
- 平行四邊形
- 菱形圖片
- 簡單的餅圖
- 三角形
- 總結
一：自適應橢圓
1. 正方形
width: 100px;
height: 100px;
background: greeen;
複製程式碼接下來，我們通過設定border-radius來改變一下正方形的形狀：
2. 圓形
width: 100px;
height: 100px;
background: greeen;
//border-radius: 50px;
//border-radius: 50px 50px;
//border-radius: 50%;
//border-radius: 100px;
以上四種寫法都可以實現圓形的效果，也就是說：border-radius的值可以是具體值，也可以是百分比(為了程式碼的可擴充性，最好用百分比)，同時，只要值大於正方形的長度的一半（例如：此處是50px），結果一定是圓形.
複製程式碼3. 單獨設定四個角半徑的的圓
width: 100px;
height: 100px;
border-radius: 50px 40px; //等價於50px 40px 50px 40px；方向依次是從左上角開始順時針旋轉！
background: green;
複製程式碼4. 單獨設定水平方向和垂直方向的圓
程式碼如下：
width: 100px;
height: 100px;
border-radius: 50px / 40px; //用 / 隔開
background: green;
複製程式碼5.橢圓
width: 200px;
height: 100px;
border-radius: 50% / 50%; //前提是寬高不同
background: green;
複製程式碼6. 半橢圓
width: 100px;
height: 100px;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: green;
複製程式碼7. 四分之一橢圓
程式碼如下：
width: 200px;
height: 100px;
border-radius: 100% 0 0 0 / 100% 0 0 0;
background: green;
複製程式碼二：平行四邊形
我們平時專案中，尤其是公司官網設計的時候，很多時候會遇到這種平行四邊形的按鈕效果，效果如下：
如何實現平行四邊形效果的按鈕呢？
我們可能會這樣想，矩形其實是平行四邊形的超集，所以只需要把矩形斜向拉伸一下不久可以啦。
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background: green;
transform: skewX(-45deg);
複製程式碼呀，怎麼裡面的內容也被拉伸了，怎麼解決呢？最直接的方法內容部分再巢狀一層div，然後再單獨設定內容的拉伸角度, 但是，如果還是隻有這一個div呢？如何用css去解決這一問題呢？ 程式碼如下：
div{
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
}
div::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: green;
transform: skewX(-45deg);
}
複製程式碼這是一個小技巧： 利用偽元素以及定位屬性，將偽元素設定成一個方塊（其實相當於還是巢狀的一個元素），並且對方塊進行變形，且設定z-index:-1，將該偽元素作為一個背景塊，放在內容下面。當我們想要某個元素變形，並且不希望該元素裡面的內容變形的時候，都可以採用該方法。
三：菱形圖片
- 首先，我們很容易想到，把一個正方形，使用transform:rotate() 旋轉一下即可。
width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
複製程式碼但是這種方案其實有個問題：我們設定的寬高分別為100px, 但是旋轉以後，元素所佔的空間就需要擴大，否則會出現如下情況
所以採用這種方案，需要我們手動去控制菱形所佔的區域，即對角線的長寬。
- 接下來，我們採用另外一種方案，clip-path， 類似於svg中的path，我們可以指定一系列的座標點，然後連起來，形成我們任意想要的圖形。 程式碼如下：
width: 200px;
height: 100px;
background: green;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
複製程式碼效果如下：
總結：這裡，我們採用clip-path繪製了四個點，效果是菱形，同樣，我們可以去繪製三個點的三角形，還有五邊形，六邊形等等各種圖形，只要你確定好各個點的位置即可。同時要注意的是，clip-path目前的相容性可能還沒有支援的很好。
四：簡單的餅圖
首先，看一下最簡單的圓形效果：
程式碼如下：
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
複製程式碼然後，我們看一下接下來的效果：兩半圓
我們來分析一下兩半圓的實現方案：
- 通過新增兩個元素，設定左邊圓和右邊圓，然後拼接在一起, 或者為了只使用一個元素，可以同時使用before和after分別設定左半圓和右半圓
div {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
div::before {
content: '';
display: inline-block;
width: 50%;
height: 100%;
border-radius: 200% 0 0 200% / 100% 0 0 100%;
background: green;
position: absolute;
left: 0px
}
div::after {
content: '';
display: inline-block;
width: 50%;
height: 100%;
border-radius: 0 200% 200% 0 / 0 100% 100% 0;
background: red;
position: absolute;
right: 0px
}
複製程式碼- 通過linear-gradient漸變實現。
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to right, green 50%, red 0);
複製程式碼3.通過linear-gradient結合背景顏色實現。
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
複製程式碼接下來，我們再近一步，看一下如下效果：
首先，我們來分析一下，相對於我們之前兩個半圓的效果，只要在此基礎上，再加一個半圓，並且背景顏色設定為green， 然後覆蓋在當前兩半圓上，同時控制旋轉的角度，這樣不就得到了,
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {
content: '';
display: inline-block;
width: 50%;
height: 100px;
border-radius: 0 100% 100% 0 / 50% 50%;
margin-left: 50%;
background-color: inherit;
transform: rotate(45deg);
transform-origin: 0 50%;
}
複製程式碼來來來，再近一步，從上面的程式碼，我們可以看到旋轉的角度被寫死為45deg, 如果可以動態的控制旋轉的角度，不就可以得到類似進度條的效果了。效果如下:
所以，接下來，最關鍵的是如何動態控制旋轉角度？簡單啊，animation不就可以啦。
程式碼如下：
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {
content: '';
display: inline-block;
width: 50%;
height: 100px;
border-radius: 0 100% 100% 0 / 50% 50%;
margin-left: 50%;
background-color: inherit;
transform-origin: 0 50%;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
to {
transform: rotate(.5turn);
}
}
@keyframes bg {
50% {
background: red;
}
}
複製程式碼五：三角形
首先，我們來看一下有邊框的正方形：
width: 100px;
height: 100px;
border: 30px solid green;
複製程式碼然後，我們設定不同的邊框顏色
程式碼如下：
width: 100px;
height: 100px;
border: 30px solid green;
border-color: green blue yellow red;
複製程式碼這個時候，我們是不是發現了一些驚喜呀，邊框交界處，都是斜線，這個時候，我們很自然的聯想到我們的三角形，這個時候，我們只要把寬高設定小一點，是不是就得到我們想要的三角形了呢。
啦啦啦，這個時候，驚喜就真的出現了，最後一個正方向就是右四個三角形組成的，
程式碼如下：
width: 0px;
height: 0px;
border: 30px solid green;
border-color: green blue yellow red;
複製程式碼再近一步，我們這個時候把其中三個邊框的顏色設定為白色或者透明，不就得到三角形了嘛，
程式碼如下：
width: 0px;
height: 0px;
border: 30px solid green;
border-color: green transparent transparent transparent;
複製程式碼效果如下：
六：總結
本節，我們實現了常見的一些橢圓，半圓，四分之一圓等效果，實現原理就是border-radius的使用，可以分別指定四個角在水平方向和垂直方向不同的半徑值，同時，我們還知道了clip-path屬性的使用，可以通過該屬性繪製節點，然後連線，這樣就可以實現任何我們想要的形狀。