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屬性的使用，能夠經過該屬性繪製節點，而後連線，這樣就能夠實現任何咱們想要的形狀。