[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 方案

......