[CSS]《CSS揭祕》第三章——形狀

自適應橢圓

border-radius:50% / 50%;//斜槓前爲水平半徑，後爲垂直半徑。

background: #fb3;
    border-radius: 100% 0 0 100%/50%;

width: 200px;
    height: 100px;
    background: #fb3;
    border-radius: 100% 0 0 0;

平行四邊形

方法一

#testdiv{
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin:0 auto;
        margin-top: 50px;
        background: #fb5;
        transform: skewX(-45deg);
    }
    #testdiv >div{
        transform: skewX(45deg);
        text-align: center;
    }

方法二（使用僞元素）

#testdiv{
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin:0 auto;
    margin-top: 50px;
    text-align: center;
    position: relative;//給宿主元素應用 position: relative 樣式
}
#testdiv::before{
    /*爲僞元素設置 position:absolute， 而後再把全部偏移量設置爲零， 以便讓它在水平和垂直方向上都
被拉伸至宿主元素的尺寸*/
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: #fb5;
    transform: skewX(-45deg);
    content: '';
}

*：

常見僞元素———::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出如今DOM中，不會改變文檔內容，不可複製，僅僅是在css渲染層加入。
因此不要用:before或:after展現有實際意義的內容，儘可能使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯繫電話，但願在它們前加一個icon☎，就能夠使用:before僞元素。
::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。

菱形

img{
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);//建立多邊形函數，參數爲各個點座標
    transition: 1s clip-path;
}
img:hover{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);//覆蓋時變正方形
}

切角效果

background: #fb3;
    background: linear-gradient(-135deg,transparent 15px,#fb3 0) top right,
                linear-gradient(135deg,transparent 15px,#fb3 0) top left,
                linear-gradient(-45deg,transparent 15px,#fb3 0) bottom right,
                linear-gradient(45deg,transparent 15px,#fb3 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

background: #fb3;
    background: radial-gradient(circle at top right,transparent 15px,#fb3 0) top right,
                radial-gradient(circle at top left,transparent 15px,#fb3 0) top left,
                radial-gradient(circle at bottom right,transparent 15px,#fb3 0) bottom right,
                radial-gradient(circle at bottom left,transparent 15px,#fb3 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

梯形標籤頁

#testdiv{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}

#testdiv::before{
    content:'';
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left: 0;
    z-index: -1;
    background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0, 0, 0, .4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    box-shadow: 0 .15em white inset;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;//當它在 3D 空間中旋轉時， 能夠把它的底邊固定住
}

簡單的餅圖

基於transform的餅圖（動畫版）

@keyframes spin{
    to{
        transform: rotate(.5turn);
    }
}
@keyframes bg{
    50%{
        background: #655;
    }
}
#testdiv{
    margin: 50px;

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}

#testdiv::before{
    content:'';
    display: block;
    margin-left: 50%;
    height: 100%;
    background-color: inherit;
    transform-origin: left;
    border-radius: 0 100% 100% 0 / 50%;
    animation: spin 3s linear infinite,
               bg 6s step-end infinite;
}

*：用到CSS 3的animation 屬性。

多個比例不一樣的靜態餅圖

@keyframes spin{
    to{
        transform: rotate(.5turn);
    }
}
@keyframes bg{
    50%{
        background: #655;
    }
}
#testdiv{
    margin: 50px;

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}

#testdiv::before{
    content:'';
    display: block;
    margin-left: 50%;
    height: 100%;
    background-color: inherit;
    transform-origin: left;
    border-radius: 0 100% 100% 0 / 50%;
    animation: spin 50s linear infinite,
               bg 100s step-end infinite;
    animation-play-state: paused;
    animation-delay: inherit;

<div id="testdiv" style="animation-delay: -20s"></div>
<div id="testdiv" style="animation-delay: -60s"></div>

SVG 方案

......