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; ??????//第二个参数为周长}CSS揭秘（三）形状
原文地址：https://www.cnblogs.com/sleeping-dog/p/8686104.html