目录：1、自适应椭圆的绘制2、平行四边形的绘制3、切角成果4、梯形标签页1、自适应椭圆的绘制
问题形容：咱们晓得只有给border-radius设定固定值或百分比就能实现圆角的成果，但椭圆要如何实现呢？
实际上咱们能够用border-radius独自设定指定程度和垂直半径，造成椭圆角的成果，如下代码的成果就是四个角度是椭圆的角。
width: 200px;height: 100px;background-color: aqua;border-radius: 50px/10px;
这时候再设定值为百分比，让椭圆角度自适应变动，就能实现椭圆成果。border-radius: 50% / 50%;
另外border-radius能够独自设置四个角的程度和垂直半径，形式就是：
border-radius：四个程度/四个垂直，如：border-radius: 50%/ 0 100% 100% 0;
就能画出如下的成果,十分好用：
2、平行四边形的绘制
问题形容：咱们实现平行四边形首先想到的办法就是transform进行形变，但这样会影响道盒子外部的内容，有没有其余代替计划呢？
width: 200px;height: 100px;background-color: skyblue;margin-left: 200px;transform: skewX(-45deg);
计划一：应用嵌套元素
是最简略的解决方案，给内容再加上一层盒子，设置相同方向的歪斜的transform就oktransform: skewX(45deg);
计划二：伪元素
外围的思维就是让伪元素代替实现平行四边形的成果，这样既不会影响内容的显示，也不须要再增加元素，后续其余背景图形的实现都能够参照伪类元素的实现。
.box2::before { content: ''; /* 用伪元素来生成一个矩形 */ width: 200px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); margin-left: 200px; }3、切角成果
什么是切角呢，理论就是四边形的某个角被切除的成果，如下：
具体实现依附的还是突变，只有加一行代码就能实现
background: linear-gradient(-45deg, transparent 15px, #58a 0);然而如果要实现两个或更多的切角该怎么实现呢，首先尝试写两次命令，发现前面的背景设置会笼罩后面的，导致生效
这里通过background-size设置多个背景的大小，让两个适度别离占据两倍，实现两个切角。
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;
相似的也能够实现四个切角的成果
4、梯形标签页
问题形容：梯形是家喻户晓无奈用CSS间接实现的图形，然而其应用场景也很宽泛，如浏览器地标签页就常常应用梯形实现，那么如何适合地画出梯形标签图形呢？
利用3D旋转给四边形提供一个角度，就能实现梯形成果，但问题是其外部的content会被影响，且3D旋转的影响是无奈被逆转的，也就是不能应用嵌套盒子的形式进行content的回复。
transform: perspective(.5em) rotateX(5deg);要解决上述问题，再次用到伪元素的技巧，防止对content的影响：
.tab::before { content: ''; /* 用伪元素来生成一个矩形 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: perspective(.5em) rotateX(5deg);}但还有一个问题，就是3D旋转后的高度是扭转了的，无奈与原来四边形的高度对齐，这就须要用transform-origin：bottom让形变时候的底部是固定的。
最初用transform-scaleY将梯形还原到原来四边形的高度。
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);transform-origin: bottom;