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

ysl_unh 發(fā)布于2019-08-30 15:53 / 1864人閱讀

摘要：自適應(yīng)橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。所以不要用或展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。和必須配合屬性來(lái)使用，用來(lái)定義插入的內(nèi)容，必須有值，至少是空。

自適應(yīng)橢圓

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;//給宿主元素應(yīng)用 position: relative 樣式
}
#testdiv::before{
    /*為偽元素設(shè)置 position:absolute， 然后再把所有偏移量設(shè)置為零， 以便讓它在水平和垂直方向上都
被拉伸至宿主元素的尺寸*/
    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渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。
這些添加不會(huì)出現(xiàn)在DOM中，不會(huì)改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。
舉例：網(wǎng)站有些聯(lián)系電話，希望在它們前加一個(gè)icon?，就可以使用:before偽元素。
::before和::after必須配合content屬性來(lái)使用，content用來(lái)定義插入的內(nèi)容，content必須有值，至少是空。

菱形

img{
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);//創(chuàng)建多邊形函數(shù)，參數(shù)為各個(gè)點(diǎn)坐標(biāo)
    transition: 1s clip-path;
}
img:hover{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);//覆蓋時(shí)變正方形
}

切角效果

    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;

梯形標(biāo)簽頁(yè)

#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;//當(dāng)它在 3D 空間中旋轉(zhuǎn)時(shí)， 可以把它的底邊固定住
}

簡(jiǎn)單的餅圖 基于transform的餅圖（動(dòng)畫版）

@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 屬性。

多個(gè)比例不同的靜態(tài)餅圖

@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;

SVG 方案

......