自适应椭圆

对于一个正方形的元素，如果设置其属性border-radius的值大于等于边长的一半，那么该元素会变成一个圆形。

<div class="round-a"></div>
body{
    display: flex;
    flex-flow: row wrap; 
    justify-content: space-around;
}
.round-a{
    background: #fb3;
    width: 10em;
    height: 10em;
    border-radius: 50%;
}

那么对于矩形设置合适的水平与垂直border-radius就可以创建出一个椭圆了。
恰好border-radius可以单独指定水平和垂直半径，只要用一个斜杠(/)分隔这两个值即可。比如对于200px * 150px的元素，把它圆角的两个半径值分别设为宽高的一般(border-radius: 100px / 75px)，就可以得到一个椭圆了。
为了创建能够自适应的椭圆，只要把参数改为百分比。

.round-b{
    margin: 20px 20px;
    background: #fb3;
    width: 10em;
    height: 6em;
}
.round-b{
    border-radius: 50% / 50%;
    /*border-radius: 50%;*/   //简写
}

半椭圆

由于border-radius的灵活性为我们创建半椭圆提供了可能性。
首先，它支持给每个角指定不同的半径。即展开式属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

当然，也可以一次提供用空格分开的多个值来简写。

如果指定四个值，则按照左上，右上，右下，左下这种逆时针指定。
如果指定三个值，则第一个表左上，第二个表示右上与左下，第三个表示右下。
如果指定两个值，则第一个表示左上与右下，第二个表示右上与左下。
如果指定一个值，则表示四个角均为该值。

但是border-radius比我之前想到的更加灵活，除了可以指定每个角为不同的半径，还可以为四个角提供完全不同的水平和垂直半径。
方法是在斜杠前指定1-4个值表示水平半径，在斜杠后指定1-4个值表示垂直半径。这两组值的简写规则与之前不同，是单独展开为四个值的。比如border-radius: 10px / 5px 20px;效果相当于border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;

有了上面这些，就可以轻松创建一个沿横轴的半椭圆了：

.round-c{
    border-radius: 50% / 100% 100% 0 0;
}

也创建一个沿纵轴的半椭圆：

.round-d{
    border-radius: 0 100% 100% 0 / 50%;
}

四分之一椭圆

按照上面的思路，要创建一个四分之一椭圆，其中一个角的水平和垂直半径都需要是100%，其他的三个角不能设为圆角。于是：

.round-e{
    border-radius: 100% 0 0 0;
}

平行四边形

在导航栏有时候会用到平行四边形。之前也写过几种实现的方法，当时用到了背景图片，这里用纯CSS实现下。
最简单的方法就是对于一个普通的矩形进行斜向拉伸：

<div class="para-a">this is a test</div>
.para-a{
    margin: 20px 20px;
    width: 10em;
    height: 4em;
    background: #58a;
    color: white;
    text-align: center;
    font: 125%/4em sans-serif;
}
.para-a{
    transform: skewX(-45deg);
}

但是这样带来一个问题，就是文字也随着被斜向拉伸了，可以用下面两种方式，只让容器形状倾斜，同时保持内容不被拉伸。

嵌套元素方案

最容易想到的方法就是嵌套一个元素了。对容器内部的元素再进行一次反向拉伸，抵消外部容器的拉伸效果。

<div class="para-b">
    <div>this is a test</div>
</div>
.para-b{
    margin: 20px 20px;
    width: 10em;
    height: 4em;
    background: #58a;
    color: white;
    text-align: center;
    font: 125%/4em sans-serif;
}
.para-b{
    transform: skewX(-45deg);
}
.para-b > div{
    transform: skewX(45deg);
}

伪元素方案

根据之前的经验，既然可以嵌套元素，那么应该也可以使用伪元素来避免污染原有的HTML结构。

<div class="para-c">this is a test</div>
.para-c{
    margin: 20px 20px;
    width: 10em;
    height: 4em;
    color: white;
    text-align: center;
    font: 125%/4em sans-serif;
    position: relative;
}
.para-c::before{
    content: "";
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    background: #58a;
    z-index: -1;
    transform: skewX(-45deg);
}

注意，这种方式虽然在视觉上是平行四边形，但是他实际所占据的仍然是个矩形。

内边框圆角

利用这种思路，可以给之前的内边框圆角增加一种实现方式

<div class="bor-ra">this is a test</div>
.bor-ra{
    margin: 20px 20px;
    width: 10em;
    height: 4em;
    color: white;
    text-align: center;
    font: 125%/4em sans-serif;
    position: relative;
}
.bor-ra{
    background: tan;
    border-radius: .8em;
    outline: .6em solid #655;
}
.bor-ra::before{
    content: "";
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    background: #655;
    z-index: -1;
}

OK 搞定~