css画图（*****************）

1. 自适应的椭圆

背景知识：border-radius属性的基本用法

使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形

1 2 3 4

background: #fb3; width: 200 px; height: 200 px; border-radius: 100 px; /*>=正方形边长的一半*/

1.1 椭圆

在实际开发中可能更多的是让元素根据内容自动调增，而不是事先设置好宽高，因为很多时候内容是不定的。我们期望：如果宽高相等，就显示一个圆，不相等就显示一个椭圆。

上面代码实现不了，当宽度大于高度的时候，便会出现下面这种情况：

解决方案：

border-radius可以单独指定水平和垂直半径，只要用一个(/)分隔这两个值就行。还一个特性是，它可以接受长度值，还可以接受百分比，两种特性结合，就可以自适应了。

1	border-radius: 50% / 50%;

由于斜杠前后的两个值现在是一致的，可以简写

1	border-radius: 50%;

1.2 半椭圆

border-radius是一个简写属性，包含四个展开式属性，这样一来可以通过设置四个角的不同半径来达到效果。

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

通过属性名字可以很清楚的知道他们用于设置哪个角。

不过还是推荐使用简洁写法，因为可以向它一次性提供用空格分开的多个值。

• 传四个值，这四个值就会被分别从左上角开始以顺时针顺序应用到各个角
• 传三个值，则意味着第四个值与第二个值相同
• 传两个值，意味着第三个值与第一个值相同，第四个值与第二个值相同。
• 传一个值，全部相同。

我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法就是在斜杠前指定1~4个值，斜杠后指定1~4个值。这两组值是单独展开为四个值。

比如border-radius：10px / 5px 20px,
相当于10px 10px 10px 10px / 5px 20px 5px 20px;

两个例子：

1	border-radius :2em;

等同于

1 2 3 4

border-top-left-radius :2em; border-top-right-radius :2em; border-bottom-right-radius :2em; border-bottom-left-radius :2em;

1	border-radius: 2em 1em 4em / 0.5em 3em;

等同于

1 2 3 4

border-top-left-radius: 2 em 0 .5em; border-top-right-radius: 1 em 3 em; border-bottom-right-radius: 4 em 0 .5em; border-bottom-left-radius: 1 em 3 em;

我们要实现的效果

弄清了，border-radius的用法，开始分析上面半椭圆的实现

• 这个形状是垂直对称的，意味着左上角和右上角的半径值应该相同，右下角和左下角半径也是相同
• 顶部边缘没有平直的部分，意味着左上角和右上角半径之和应该等于整个形状的宽度，结合上一条，左半径和右半径在水平方向上是50%。
• 垂直方向，顶部的两个圆角占据了整个元素的高度，而且底部没有任何圆角，因此在垂直方向上值应该好似100% 100% 0 0。
• 因为底部两个角的垂直圆角是零，那么他们的水平圆角是多少就完全不重要了

1	border-radius: 50% / 100% 100% 0 0;

沿纵轴劈开的半椭圆

1	border-radius: 100% 0 0 100% / 50%;

1.3 四分之一椭圆

创建一个四分之一椭圆，其中一个角水平和垂直半径值都需要100%，而其他三个角都不能设为圆角

1	border-radius: 100% 0 0 0;

2. 平行四边形

背景知识：基本变形属性transform，属性很多，用到哪个讲哪个。

我们一般用skew属性来对矩形进行斜向拉伸，变成平行四边形，但是如果直接对元素使用的话，它里面的内容也会跟着斜向变动。

2.1 嵌套元素方案

对容器内容再应用一次反向的skewX()变形，从而抵消容器的变形效果

1 2 3 4 5

<a href="#" class="button"> <div> click me </div> </a>

css

1 2 3 4 5 6 7

.button { transform: skewX(-45deg); } .button > div { transform: skewX(45deg); }

skewX() 定义沿着 X 轴的 2D 倾斜转换。对应还有skewY(angle)，skew(x-angle,y-angle)

2.2 伪元素方法

上面方法需要添加额外的HTML元素。这里提供一个不用添加额外的HTML元素的。

这种方法的思路是把所有的样式(背景、边框等)应用到伪元素上，然后对伪元素进行变形。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.button { position: relative; /* 其他的文字颜色、内外变局等样式*/ } .button ::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: - 1; background: #58a; transform: skew(-45deg); }