经典css题面试（二）—— 请用 css 画三角形、梯形、扇形、椭圆？

前言：

在开始之前先给大家看一下这段代码以及效果：

css 复制代码

<style>
    .square {
        width: 0;
        height: 0;
        border-top: 100px solid yellow;
        border-left: 100px solid blue;
        border-right: 100px solid green;
        border-bottom: 100px solid red;
    }
</style>

html 复制代码

<div class="square"></div>

这段 CSS 代码中的每个边框都是三角形的原因是在设置边框样式时，我们将四条边框都设置为等长的100px，但是并没有子元素在其中，所以四条边框都会俩俩重叠（如下图），我们以底部的红色边框为例，它范围本为1+2+3+4区域，但是蓝色与绿色都与红色边框俩俩重叠，浏览器会自带帮我们把该区域等分填充即各分一半的区域，所以俩俩交叉形成了三角形。

ok，当我们知道这一点时，三角形不就手到擒来~

1. 画一个三角形：

html 复制代码

<style>
    .triangle {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red;
    }
</style>

<div class="triangle"></div>

通过前面我们知道了四条边框是如何形成三角形的，现在我们只需要把其他三条边框都设置为透明色transparent，剩下的一条边框则就是我们要的三角形。此外我们也可以通过改变边框长度来改变三角形的形状，这里笔者就不继续赘述了。

2. 画一个梯形：

前面开始我们的容器内部并没有设置宽高，但当我们给容器设置宽高时：

html 复制代码

<style>
    .trapezoid {
        width: 100px;
        height: 100px;
        border-top: 100px solid yellow;
        border-left: 100px solid blue;
        border-right: 100px solid green;
        border-bottom: 100px solid red;
    }
</style>

<div class="trapezoid"></div>

所以，我们也可以通过同样的方法来得到一个梯形，把任意三边颜色设置为 transparent即可得到某一朝向的梯形。

html 复制代码

<style>
    .trapezoid {
        width: 100px;
        height: 100px;
        border-top: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red;
    }
</style>

<div class="trapezoid"></div>

3. 画一个扇形：

方法一：border-radius

border-radius可以设置四个值，它们分别代表着：左上角，右上角，右下角，左下角。我们给右上角设置等宽高的100px可以得到一个朝向右上角的90度扇形。

html 复制代码

<style>
    .circle {
        border-radius:0 100px 0 0;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>

<div class="circle"></div>

方法二：clip-path

设置 border-radius: 50%; 让它显示为一个圆形。clip-path 属性用来定义一个裁剪路径，然后配合 polygon 函数，将圆形裁剪成一个扇形，从而实现了一个简单的扇形效果。

(50% 50%)：表示裁剪路径的第一个点位于横坐标为元素宽度一半（50%）和纵坐标为元素高度一半（50%）的位置，即在元素的中心。
(50% 0%)：表示裁剪路径的第个二点位于横坐标为元素宽度一半（50%）和纵坐标为 0 的位置，即在元素的上水平中心。
(100% 0)：表示裁剪路径的第三个点位于横坐标为元素宽度（100%）和纵坐标为 0 的位置，即在元素的右上角。
(100% 50%)：表示裁剪路径的第四个点位于横坐标为元素宽度（100%）和纵坐标为元素高度一半（100%）的位置，即在元素的左角。

这些点按顺时针方向连接起来，形成了一个从元素中心开始逆时针旋转的矩形裁剪路径。元素内部位于裁剪路径内的部分会被保留显示，而位于外部的部分则会被裁剪隐藏。

html 复制代码

<style>
    .circle {
        width: 200px;
        height: 200px;
        background-color: yellow;
        border-radius: 50%;
        clip-path: polygon(50% 50%, 50% 0, 100% 0%, 100% 50%);
    }
</style>

<div class="circle"></div>

4. 画一个椭圆：

我们可以用通过改变宽高来完成一个椭圆。

html 复制代码

<style>
    .ellipse {
        width: 200px;
        height: 100px;
        background: yellow;
        border-radius: 50%;
    }
</style>

<div class="ellipse"></div>