css揭祕實戰技巧 - 形狀 [二]

全目錄

本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字型排印[四]
5. css揭祕實戰技巧 - 使用者體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

本節課要將的內容：

1. 自適應橢圓
2. 平行四邊形
3. 菱形圖片
4. 簡單的餅圖
5. 三角形
6. 總結

一：自適應橢圓

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;
複製程式碼

注意：從橢圓，到半橢圓，再到四分之一橢圓，我們要理解border-radius是怎麼設定的，這就和border-radius的值的寫法有關了：border-radius: 50% 50% 50% 50% / 50% 50&% 50% 50%；其他簡寫都可以轉換成前面的寫法，方向是從左上角開始順時針旋轉，/ 前面是水平方向的半徑，後面是垂直方向的半徑。

二：平行四邊形

我們平時專案中，尤其是公司官網設計的時候，很多時候會遇到這種平行四邊形的按鈕效果，效果如下：

如何實現平行四邊形效果的按鈕呢？

我們可能會這樣想，矩形其實是平行四邊形的超集，所以只需要把矩形斜向拉伸一下不久可以啦。

然後，我們使用transform: skewX(45deg)拉伸以下，程式碼如下：

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，將該偽元素作為一個背景塊，放在內容下面。當我們想要某個元素變形，並且不希望該元素裡面的內容變形的時候，都可以採用該方法。

三：菱形圖片

1. 首先，我們很容易想到，把一個正方形，使用transform:rotate() 旋轉一下即可。

   

   程式碼如下：

width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
複製程式碼

但是這種方案其實有個問題：我們設定的寬高分別為100px, 但是旋轉以後，元素所佔的空間就需要擴大，否則會出現如下情況

所以採用這種方案，需要我們手動去控制菱形所佔的區域，即對角線的長寬。

2. 接下來，我們採用另外一種方案，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;
複製程式碼

然後，我們看一下接下來的效果：兩半圓

我們來分析一下兩半圓的實現方案：

1. 通過新增兩個元素，設定左邊圓和右邊圓，然後拼接在一起, 或者為了只使用一個元素，可以同時使用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
}

複製程式碼

2. 通過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，並且寬高都設定為0，利用邊框交界處的斜線，就可以得到四個三角形構成的正方形或者長方形，然後再設定其中三個邊框的顏色為透明，就可以得到我們想要的三角形了（其實還是一個正方形，只不過其中三個三角形的顏色是透明的）

六：總結

本節，我們實現了常見的一些橢圓，半圓，四分之一圓等效果，實現原理就是border-radius的使用，可以分別指定四個角在水平方向和垂直方向不同的半徑值，同時，我們還知道了clip-path屬性的使用，可以通過該屬性繪製節點，然後連線，這樣就可以實現任何我們想要的形狀。