一、平行四边形
背景知识：transform，伪元素
代码示例：
Click me
.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 {
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、圆切角
代码示例：
圆弧切角的实现：用径向渐变实现；注意：径向渐变中的语法所表示的意思
.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 方案一：利用线性渐变解决；需要注意的是：各个方位角所代表的角度。
代码示例：
方案一：利用线性渐变解决；需要注意的是：各个方位角所代表的角度。
.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多边形函数构图原理的进一步深入。
代码示例：
方案2：border-image 与内联SVG：需要对 SVG 的语法进行学习和 polygon多边形函数构图原理的进一步深入
.bevel-corners {
margin-top: 10px;
border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\
');
background: #58a;
background-clip: padding-box;
padding: .2em .3em;
max-width: 12em;
color: white;
font: 150%/1.6 Baskerville, Palatino, serif;
}
直角切角方案二效果图
2.3 方案三： 路径裁切解决方案：最大的缺陷是不可维护性，需要借用预处理器才能更好的维护，但是它可以使用任意类型的背景。
代码示例：
方案三：路径裁切解决方案：最大的缺陷是不可维护性，需要借用预处理器才能更好的维护，但是它可以使用任意类型的背景
.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 渐变
代码示例：
此效果需要注意的：1、需要借助伪元素来实现，2、在不同角度的折角需要利用三角函数来计算折角的宽高。3、在变形过程中的顺序问题，要先平移在旋转，4、为了可复用性需要借助scss，而scss不支持三角函数，需要借助compass框架
.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
代码示例：
Content area
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 动画
代码示例：
.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 变形规范参考