css 变形示例

一、平行四边形

背景知识：transform，伪元素
代码示例：

    <a href="#yolo" class="button">
        <div>Click me</div>
    </a>
    <button class="button">
        <div>Click me</div>
    </button>
    .button {
        position: relative;
        display: inline-block;
        padding: 0.5em 1em;
        border: 0;
        margin: 0.5em;
        background: transparent;
        color: white;
        /* text-transform 控制文本的大小写，capitalize(首字母大写), uppercase(全部大写), lowercase(全部小写) */
        text-transform: uppercase;
        text-decoration: none;
        font: bold 200%/1 sans-serif;
    }
    /*/
        用伪元素实现一个矩形，也可以使用一个冒号代替或者用after
        /*/
    
    .button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: skew(45deg);
    }

平行四边形效果图

二、菱形图片

背景知识：clip-path，transition，transform-origin
代码示例：

<img src="img/search_more.png" />
img {
    margin-top: 30px;
    width: 300px;
    height: 300px;
    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%);
    transform-origin: bottom;
    transform: scale(1.3);
}

菱形图片效果图

三、切角效果

背景知识：css 渐变，border-image，background-clip，calc()，polygon-clip，SVG知识点
主要介绍圆弧切角和直角切角的实现。
1、圆切角
代码示例：

<div class="scoop-corners">圆弧切角的实现：用径向渐变实现；注意：径向渐变中的语法所表示的意思</div>
.scoop-corners {
    margin-top: 10px;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
                radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 130%/1.6 Baskerville, Palatino, serif;
}

圆弧切角效果图

2、直角切角
有三种实现方案：
2.1 方案一：利用线性渐变解决；需要注意的是：各个方位角所代表的角度。
代码示例：

<div class="bevel-corners-gradients">方案一：利用线性渐变解决；需要注意的是：各个方位角所代表的角度。</div>
.bevel-corners-gradients {
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

直角切角方案一效果图

2.2 方案二：border-image 与内联SVG：需要对 SVG 的语法进行学习和 polygon多边形函数构图原理的进一步深入。
代码示例：

<div class="bevel-corners">方案2：border-image 与内联SVG：需要对 SVG 的语法进行学习和 polygon多边形函数构图原理的进一步深入</div>
.bevel-corners {
    margin-top: 10px;
    border: 20px solid transparent;
    border-image: 1 url('data:image/svg+xml,\
                            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="%2358a">\
                            <polygon points="0,1 1,0 5,0 6,1 6,5 5,6 1,6 0,5" />\
                            </svg>');
    background: #58a;
    background-clip: padding-box;
    
    padding: .2em .3em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

直角切角方案二效果图

2.3 方案三： 路径裁切解决方案：最大的缺陷是不可维护性，需要借用预处理器才能更好的维护，但是它可以使用任意类型的背景。
代码示例：

<div class="bevel-corners-clipped">方案三：路径裁切解决方案：最大的缺陷是不可维护性，需要借用预处理器才能更好的维护，但是它可以使用任意类型的背景</div>
.bevel-corners-clipped {
    margin-top: 10px;
    background: #58a;
    -webkit-clip-path: 
        polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%, 0 calc(100% - 20px), 0 20px);
    clip-path:
            polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%, 0 calc(100% - 20px), 0 20px);
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}

直角切角方案三效果图

四、折角效果

背景知识：伪元素，transform，css 渐变
代码示例：

<div class="note1">此效果需要注意的：1、需要借助伪元素来实现，2、在不同角度的折角需要利用三角函数来计算折角的宽高。3、在变形过程中的顺序问题，要先平移在旋转，4、为了可复用性需要借助scss，而scss不支持三角函数，需要借助compass框架</div> 
.note1 {
    position: relative;
    max-width: 30em;
    padding: 2em;
    background: #58a;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    border-radius: .5em;
}
.note1::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
    width: 1.7em;
    height: 3em;
    -webkit-transform: translateY(-1.3em) rotate(-30deg);
        -moz-transform: translateY(-1.3em) rotate(-30deg);
        -ms-transform: translateY(-1.3em) rotate(-30deg);
            -o-transform: translateY(-1.3em) rotate(-30deg);
            transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;     
    box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}

折角效果图

五、梯形标签页

背景知识：伪元素，transform
代码示例：

    <nav>
        <a href="#">Home</a>
        <a href="#" class="selected">Projects</a>
        <a href="#">About</a>
    </nav>
    <main>
        Content area
    </main>
    nav {
        position: relative;
        z-index: 1;
        padding-left: 1em;
    }

    nav > a {
        position: relative;
        display: inline-block;
        padding: .3em 1em 0;
        color: inherit;
        text-decoration: none;
        margin: 0 -.3em;
    } 

    nav > a::before,
    main {
        border: .1em solid rgba(0,0,0,.4);
    }

    nav a::before {
        content: ''; /* To generate the box */
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        border-bottom: none;
        border-radius: .5em .5em 0 0;
        background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
        box-shadow: 0 .15em white inset;
        transform: scale(1.1, 1.3) perspective(.5em) rotateX(3deg);
        transform-origin: bottom;
    }

    nav a.selected { z-index: 2;}

    nav a.selected::before {
        background-color: #eee;
        margin-bottom: -.08em;
    }

    main {
        display: block;
        margin-bottom: 1em;
        background: #eee;
        padding: 1em;
        border-radius: .15em;
    }
    nav.left > a::before {
        transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom left;
    }

    nav.right { padding-left: 2em; }

    nav.right > a::before {
        transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom right;
    }

梯形标签页

六、简单的饼图

背景知识：css 渐变，transform，css 动画
代码示例：

    <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;
        animation: spin 3s linear infinite, bg 6s step-end infinite;
    }

    @keyframes spin {
        to { transform: rotate(.5turn); }
    }
    @keyframes bg {
        50% { background: currentColor; }
    }

简单的饼图
这里需要注意动画的形成原理。
css 变形规范参考