自适应的椭圆
椭圆
border-radius: 50%;
二分之一椭圆
border-radius: 100% 0 0 100%/50%;
四分之一椭圆
border-radius: 100% 0 0 0;
关于border-radius的解释，语法：水平切角/垂直切角，水平切角和垂直切角里都有四个方位。
以二分之一椭圆为例:左上角的水平切角和垂直切角分别为100%和50%，右上角都为0，右下角都为0，左下角为100%和50%，所以是100% 0 0 100%/50%
平行四边形
直接通过矩形变形得到:
abctransform: skewX(-45deg);
存在的问题，内部的文字也倾斜了。
解决方案主要有:1. 将内部文字反向侵袭skewX(45deg); 2. 使用伪元素;
伪元素方案：
abcdiv {
width: 100px;
height: 20px;
position: relative;
text-align: center;
}
div::before {
content: '';
width: 100%;
height: 100%;
background: yellowgreen;
position: absolute;
left: 0;
top: 0;
transform: skewX(-45deg);
z-index: -1;
}
菱形
通过简单的矩形旋转可以得到如下的示例图片：
可以发现和之前的平行四边形一样内部的背景图片也变形了。
解决方案：
- 使用单独的元素img替换background-image,再负方向旋转校正
transform: rotate(-45deg) scale(1.42);
这里的scale是因为如果不放大，图片四个角会有空隙,需要乘以 (\(\sqrt{2}\))
- 使用clip-path
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
切角效果
三角切角
background: #58a;
background-image:
linear-gradient(45deg, white 15px, transparent 0),
linear-gradient(-45deg, white 15px, transparent 0),
linear-gradient(135deg, white 15px, transparent 0),
linear-gradient(-135deg, white 15px, transparent 0);
弧形切角
background-image:
radial-gradient(circle at top left, transparent 15px, #58a 0),
radial-gradient(circle at bottom left, transparent 15px, #58a 0),
radial-gradient(circle at top right, transparent 15px, #58a 0),
radial-gradient(circle at bottom right, transparent 15px, #58a 0);
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: top left, bottom left, top right,bottom right;
svg+border-image
background: #58a;
background-clip: padding-box;
border: 15px solid #58a;
border-image: 1 url('data:image/svg+xml,\
<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>')
clip-path
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)
梯形
简易梯形
transform: perspective(.5em) rotateX(5deg);
书签效果
只需改变transform-origin, trasnform-origin设置为right bottom即可实现上面的书签效果:
transform-origin: right bottom;
简单的饼图
伪元素解决方案
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: yellowgreen;
position: relative;
background-image: linear-gradient(90deg, transparent 50%, #655 0);
}
.pie::before {
content: '';
width: 50%;
height: 100%;
position: absolute;
left: 50%;
transform-origin: left;
background: yellowgreen;
border-radius: 0 100% 100% 0/50%;
transform: rotate(.3turn);
}
但是这样写当饼图比率超过50%的时候无法按照预想的正确显示，60%:
这个问题可以用动画的一个小技巧解决，用负的动画延时来直接跳至动画的任意时间点，并定格在那里。因为动画是暂停的，所以动画的第一帧（由负的animation-delay值定义）将是唯一显示出的那一帧，在饼图上显示出的比率就是我们的animation-delay值在总的动画时间里所占的比率：
@keyframes spin {
to {transform: rotate(.5turn);}
}
@keyframes bg {
50% {background: #655;}
}
.pie-60::before {
/* 相同的样式略 */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-delay: -60s;
animation-play-state: paused;
}
svg解决方案
关于strokw-width和stoke-dasharray
先了解一下stroke-width和stroke-dasharray:
stroke-width表示线段宽度；
stroke-dasharray第一个参数表示线段长度，第二个参数表示间隙宽度。
使用示例如下：
如上图左边的图形：
<div class="pie1">
<svg width="100" height="100">
<circle r="25" cx="50" cy="50"/>
</svg>
</div>
.pie1 circle{
fill: yellowgreen;
stroke: #655;
stroke-width: 40;
stroke-dasharray: 20 10;
}
改变stoke-width 还能实现各种有趣的图形：
设置stroke-width等于2 x r, stroke-dasharray的第二个参数大于2 x pi x r就可以得到连续的图案。
实现不同比率的圆
要设置60%比率的圆，stroke-dasharray的线段长度为(60% * 2 * pi * r) , 这里的r是circlr的半径。
所以可设置圆周长为100，这样设置不同比率的圆形时stroke-dasharray的第一个参数就可以直接按照比率进行设置。
因为2 x pi x16约等于100，所以设置r为16。
这样设置以后60%比率的圆, storke-dasharray的第一个参数只需填写45即可。
.pie3 svg {
transform: rotate(-90deg) scale(3);
background: yellowgreen;
border-radius: 50%;
}
.pie3 circle {
fill: transparent;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 60 100;
}
多色块的圆
使用svg解决方案能很方便地增加第三种颜色，增加圆形，并设置stroke-dashoffset即可。
stroke-dashoffset 属性指定了dash模式到路径开始的距离。
如果使用了一个 <百分比> 值， 那么这个值就代表了当前视口的一个百分比。
值可以取为负值。
.pie4 circle:nth-child(1) {
fill: transparent;
stroke: #58a;
stroke-width: 32;
stroke-dasharray: 30 100;
}
.pie4 circle:nth-child(2) {
fill: transparent;
stroke: deeppink;
stroke-width: 32;
stroke-dasharray: 30 100;
stroke-dashoffset: 100;
}