CSS揭祕（三）形狀

Chapter 3

 1. 橢圓

橢圓的實現主要依靠 border-radius 屬性，該屬性肯定邊框切圓角的半徑大小，能夠指定數值 px，也能夠使用百分比顯示

並且該屬性很是靈活，四個角能夠分別設置

width: 200px;
height:200px;                    //正方形
--------------------------------------------------------
border-radius:100px;          //圓形
border-radius:50%/50%;     //水平半徑 / 垂直半徑
--------------------------------------------------------
border-radius:50px/20px;    //橢圓邊角
--------------------------------------------------------
border-radius:50%/100% 100% 0 0  //半橢圓，底部垂直圓角爲0時水平圓角也自動爲0，無需再次指定

                  

2. 平行四邊形

平行四邊形的實現依靠 transform：skew（）實現，能夠本身選擇傾斜的方向X軸仍是Y軸

要解決的問題是：如何在容器傾斜的狀況下保持內容不變？

<a href="#yolo" class="button"><div>Click me</div></a>
---------------------------------------------------
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }  //文字設置反向傾斜以抵消容器帶來的傾斜

.button {
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: #58a;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button {                                 //宿主元素
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button::before {                          //僞元素   
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

//想要變形元素而不變形內容能夠使用

 

3. 簡單的餅圖

餅圖實現有兩種方式：漸變與SVG

漸變結合僞元素實現旋轉，要注意超過50%以後要反轉僞元素背景色；

經過這種方式還能夠作動態旋轉動畫，用做加載進度的顯示

<div class="pie"></div>
--------------------------------------------------------------------------------------------
.pie {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform:rotate(0.15turn);    //設置旋轉角度
}

 

 

 SVG實現是先畫圓和描邊，而後在描邊的下層再畫一個更大的圓

虛線描邊屬性 stroke-dasharray 的第一個參數表示虛線長度，第二個爲虛線之間的間隙長度

<svg width="100" height="100">
<circle r="25" cx="50" cy="50"/>
<svg>
------------------------------------------
svg {
    transform: rotate(-90deg);
    background: yellowgreen;
    border-radius: 50%;
}

circle {
    fill: yellowgreen;
    stroke: #655;
    stroke-width:50;               //該寬度爲半徑的兩倍
    stroke-dasharray:50 160;       //第二個參數爲周長
}