CSS揭秘：自适应绘制特殊形状的椭圆、梯形、平行四边形说明：我们知道只要给border-radius设置一个固定的值或者百分比就可以实现圆角的效果，但是椭圆怎么实现呢？其实我们可以通过border-radius分别设置指定的水平和垂直半径，形成椭圆角的效果。下面代码的效果是四个角都是椭圆的角。宽度：200px；高度：100px；背景色：浅绿色；边界半径：50px/10px；这个时候把值设置成百分比，这样椭圆的角度就可以自适应变化，就可以达到椭圆的效果了。边界半径：50%/50%；另外，border-radius可以分别设置四个角的水平和垂直半径，方式为：border-radius:四横/四竖，如：border-radius:50%/0100%100%0;可以画出如下效果，非常好用：2.画一个平行四边形问题描述：实现平行四边形我们想到的第一个方法就是对它进行变换，但是这样会影响盒子里面的内容，有没有其他的选择？宽度：200px；高度：100px；背景颜色：天蓝色；左边距：200px；变换：skewX(-45deg)；方案一：使用嵌套元素是最简单的解决方案，在content中加一层boxes，将slantedtransform设置为相反的方向即可oktransform:skewX(45deg);方案二：伪元素的核心思想是让伪元素代替平行四边形效果，这样既不会影响内容的显示也不需要添加元素，后续实现其他背景图形即可参考伪类元素的实现。.box2::before{内容：'';/*使用伪元素生成矩形*/width:200px;高度：100px；位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#58a；变换：倾斜（45度）；左边距：200px；}3。切角效果什么是切角？：具体实现要看渐变，加一行代码实现背景即可：linear-gradient(-45deg,transparent15px,#58a0);但是如果要实现两次或多次切角，怎么实现呢，先尝试写两次命令，发现后面的后台设置会覆盖之前的，导致失败。这里通过background-size设置多个背景的大小，使得两个transition分别占用两次，实现两个切角。背景：#58a；背景：线性渐变（-45deg，透明15px，#58a0）右，线性渐变（45deg，透明15px，#6550）左；背景大小：50%100%；背景重复:不重复；四个切角也可以达到类似的效果。4、梯形标签页问题描述：梯形是一种不能直接用CSS实现的图形，但是它的使用场景也很广泛，比如浏览器的标签页。经常使用梯形实现，那么如何正确绘制梯形标签图形呢？使用3D旋转给四边形提供一个角度可以实现梯形的效果，但是问题是它内部的内容会受到影响，而且3D旋转的影响是不可逆的，即不能使用嵌套框来回复内容。变换：透视（.5em）旋转X（5deg）；解决以上问题，再次使用伪元素的技巧，避免对内容的影响：.tab::before{content:'';/*使用伪元素生成矩形*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#58a；transform:perspective(.5em)rotateX(5deg);}但是还是有一个问题，就是改变了3D旋转后的高度，不能和原来四边形的高度对齐，这就需要使用transform-origin:bottom保持底部变形固定。最后用transform-scaleY将梯形恢复到原来四边形的高度。变换：scaleY(1.3)perspective(.5em)rotateX(5deg)；变换原点：底部；
