Chapter 3
1. 椭圆
椭圆的实现主要依靠 border-radius 属性，该属性确定边框切圆角的半径大小，可以指定数值 px，也可以使用百分比显示
而且该属性非常灵活，四个角可以分别设置
width: 200px;
height:200px; //正方形
--------------------------------------------------------
border-radius:100px; //圆形
border-radius:50%/50%; //水平半径 / 垂直半径
--------------------------------------------------------
border-radius:50px/20px; //椭圆边角
--------------------------------------------------------
border-radius:50%/100% 100% 0 0 //半椭圆，底部垂直圆角为0时水平圆角也自动为0，无需再次指定
2. 平行四边形
平行四边形的实现依靠 transform：skew（）实现，可以自己选择倾斜的方向X轴还是Y轴
要解决的问题是：如何在容器倾斜的情况下保持内容不变？
<a href="#yolo" class="button"><div>Click me</div></a> --------------------------------------------------- .button { transform: skewX(45deg); } .button > div { transform: skewX(-45deg); } //文字设置反向倾斜以抵消容器带来的倾斜 .button { display: inline-block; padding: .5em 1em; border: 0; margin: .5em; background: #58a; color: white; text-transform: uppercase; text-decoration: none; font: bold 200%/1 sans-serif; }
.button { //宿主元素 position: relative; display: inline-block; padding: .5em 1em; border: 0; margin: .5em; background: transparent; color: white; text-transform: uppercase; text-decoration: none; font: bold 200%/1 sans-serif; } .button::before { //伪元素 content: ‘‘; /* To generate the box */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); }
//想要变形元素而不变形内容可以使用
3. 简单的饼图
饼图实现有两种方式：渐变与SVG
渐变结合伪元素实现旋转，要注意超过50%之后要反转伪元素背景色；
通过这种方式还可以做动态旋转动画，用作加载进度的显示
<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; transform:rotate(0.15turn); //设置旋转角度 }
SVG实现是先画圆和描边，然后在描边的下层再画一个更大的圆
虚线描边属性 stroke-dasharray 的第一个参数表示虚线长度，第二个为虚线之间的间隙长度
<svg width="100" height="100"> <circle r="25" cx="50" cy="50"/> <svg> ------------------------------------------ svg { transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width:50; //该宽度为半径的两倍 stroke-dasharray:50 160; //第二个参数为周长 }
