9、自适应的椭圆
圆形：给一个正方形设置一个大于边长长度一半的border-radius即可。
椭圆：
border-radius:50%;半椭圆：
border-radius:100% 0 0 0;四分之一椭圆：
border-radius:100% 0 0 0;10、平行四边形
最简单的变形：形状和内容一起变形，不合要求（要求是形状变形，文字不变形）
transform:skewX(-45deg);嵌套元素方案：使用一个嵌套的div，即两个div，在包含文字的div对其再变形一次，从而抵消容器的变形。
伪元素方案：把所有的样式应用到伪元素上，然后再对伪元素进行变形。
.button{
position: relative;
/*其他的文字颜色，内边距等样式*/
}
.button::before{/*在IE8中及较早版本中必须声明<!DOCTYPE>*/
content:'';
position:relative;
top:0; right: 0; bottom:0; left:0;
z-index: -1;
background:#58a;
transform:skew(45deg);
}
11、菱形图片
方法一：把图片用一个div包裹，然后对其应用相反的rotate()变形样式：
<div class="picture">
<img src="xxx.jpg" alt="..." />
</div>
.picture{
width:400px;
transform:rotate(45deg);
overflow:hidden;
}
.picture >img{
max-width:100%;
transform:rotate(-45deg) scale(1.42);/*图片的边长和容器对角线相等，scale默认是以它的中心点进行缩放，除非额外指定transform-origin样式*/
}
方法二：clip-path属性，从svg处借鉴
clip-path:polygon(50% 0， 100% 50%， 50% 100%， 0 50%);/*多边形函数，clip-path允许把元素剪裁成我们想要的任何形状*/
延伸：可以参与动画，只要我们的动画是在同一种形状函数之间进行的，而且点的数量是相同的。此外这个方法还可以很好地适应正方形的图片。
如果希望图片在鼠标悬停时平滑的扩展为完整的面积：
img{
clip-path: poly(50% 0， 100% 50%， 50% 100%， 0 50%);
transition:1s clip-path;
}
img:hover{
clip-path: poly(0 0， 100%0，100% 100%， 0100%);
}
12、切角效果
方案一：css渐变：只需要一个角被切掉，渐变可以接受一个角度（例如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。
线性渐变：把一个透明色标放在切角处，在相同位置设置另一个色标，并且把他的颜色设置为我们想要的背景色。
background:#58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);
假设两个切角，需要两层渐变：
background:#58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left ;
background-size: 50% 100%;/*使每层渐变只占整个元素一半的面积*/
background-repeat: no-repeat;
四个角
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;
如果用scss写：略
弧形切角----------内凹圆角
background:#58a;
background:radial-gradient(135deg, transparent 15px, #58a 0) top left;/*径向渐变*/
radial-gradient(-135deg, transparent 15px, #58a 0) top right ;
radial-gradient(-45deg, transparent 15px, #58a 0) bottom right;
radial-gradient(45deg, transparent 15px, #58a 0)bottom left ;
background-size: 50% 50%;
background-repeat: no-repeat;
内联svg与border-image方案
border: 15px solid transparent;
border-image: 1 url('data: image/svg+xml,\ /*1表示svg的坐标系统*/
<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
<polygon points="0,1,1,0,2,0,3,1,3,2,2,3,1,3,0,2"/>'\
</svg>);
background: #58a;
background-clip: padding-box;
裁切路径方案
background: #58a;
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
);
最大的缺点在于：当内边距不够宽时，它会裁切掉文本，渐变方案允许文字溢出并超出切角区域；而border-image方案则会起到普通边框的作用，令文字折行。
13、梯形标签页
根据透视原理，在三维图形中旋转一个矩形，看到的图形就是梯形
transform: perspective(.5em) rotate(5deg);
但这样产生的文字也变形了，对元素使用了3D变形之后，其内部的变形效应是“不可逆转的”。如果使用3D变形的功能生成梯形，唯一可行的方案是将变形效果应用在为元素上，类似于生成平行四边形的方法。
.tab{
position: relative;
display: inline-block;
padding: .5rem 1rem .35rem;
color:white;
}
.table:before{
content:'';/*用伪元素生成一个矩形*/
position:absolute;
top:0;right:0;bottom:0;left:0;
z-index:-1;
background:#58a;
transform:perspective().5rem rotate(5deg);
}
由于以上虽然可以实现，但是元素投射到2D屏幕上的尺寸会发生很多变化：宽度增加、位置稍稍下移、高度稍许缩减等。
必须指定transform-origin:bottom;当它在3D空间中旋转时，可以把他的底边固定住。通过变形属性来改变尺寸。
transform:scaleY(1.3) perspective(.5rem) rotate(5deg);
transform-origin:bottom;
标签页的例子：
nav > a{
position: relative;
display: inline-block;
padding: .3rem 1rem 0;
}
nav > a{
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(hsla(0, 0%,100%,.6)
hsla(0, 0%,100%,0));
border: 1px solid rgb(0, 0, 0, .4);
border-bottom: none;
border-radius: .5rem .5rem 0 0;
box-shadow: 0 .15rem white inset;
transform:perspective().5rem rotate(5deg);
transform-origin: bottom;
}
缺点：斜边的角度依赖与元素的宽度。
14、简单的饼图
炫酷的进度指示器：
@keyframes spin{
to {transform: rotate(.5turn);}
}
@keyframes bg{
50% { background: #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;
}
多个不同比率的静态饼图：
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>
@keyframes spin{
to {transform: rotate(.5turn);}
}
@keyframes bg{
50% { background: #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 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
把饼图的比率写到元素的内容中：
$$('.pie').foreach(function(pie){
var p = parseInt(pie.textContent);
pie.style.animationDelay = '-' + p + 's';
});
最终代码：
.pie{
position: relative;
width: 100px;
line-height: 100px;
border-radius:50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
@keyframes spin{
to {transform: rotate(.5turn);}
}
@keyframes bg{
50% { background: #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 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
svg解决方案：
<svg width="100" height="100">
<circle r="30" cx="50" cy="50"/>
</svg>
circle{
fill:yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 60 158;/*为虚线描边准备*/
}
svg{
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}
优化后代码：
<svg viewbox="0 0 32 32">用js脚本实现css：略。
<circle r="16" cx="16" cy="16"/>
</svg>
circle{
fill:yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 38 100;
}
svg{
width: 100;height: 100;
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}