基础面试题：用css画图形

在CSS中，可以利用各种属性和技巧来创建图形，无需依赖图片。以下是一些基本图形的示例及其相应的CSS代码：

矩形(Rectangle)

• 只需要设置好矩形的宽width、高height以及背景颜色background-color就好了

.rectangle {
            width: 100px;
            height: 50px;
            background-color: red; 
        }

正方形（square）

正方形的话只需要设置宽width和高height相同即可

.square {
            width: 100px;
            height: 100px;
            background-color: red; 
        }

圆形 (Circle)

圆形只需要在正方形的基础上将其的直角改为圆角就好了，相当于加上border-radius，0%~50%是角弯曲的弧度，超过50%也只能弯50%。

.circle {
            width: 100px;
            height: 100px;
            background: green ;
            border-radius: 50%;
        }

注意：也可以用border-radius来做一个圆形矩形哦，只要理解了圆形的制作方法，相信这个我不说你也会。

椭圆（oval）

而椭圆的话也只需要改变一下宽width和高height就可以

.oval {
            width: 200px;
            height: 100px;
            background: green ;
            border-radius: 50%;
        }

三角形 (Triangle)

利用css中的边框border来绘制三角形

• 这里我们先将整个border设为transparent透明的
• 将元素的宽度（width）和高度（height）都设置为0，以消除实际的矩形形状，只留下边框形成的三角形
• 给一个边框加上颜色就可以实现该方向的三角形
• 通过改变有颜色边框的宽度来调整三角形的高度。宽度越大，形成的三角形高度越高。

.triangle1{ 
            border: 100px solid transparent   ;
            width: 0;
            height: 0;
            border-bottom: 200px solid red ;
        }
.triangle2{ 
            border: 100px solid transparent   ;
            width: 0;
            height: 0;
            border-bottom: 100px solid red ;
        }

如下图：

来看看各个方向的三角形吧

.triangle{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-bottom: 100px solid red ;
            border-top : 100px solid yellow ;
            border-left: 100px solid blue ;
            border-right: 100px solid green; 
        }

只需要将其他不需要的方向的三角形设为透明的transparent就可以得到需要的三角形

        .triangle1{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-bottom: 100px solid red ;
        }
        .triangle2{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-top : 100px solid yellow ; 
        }
        .triangle3{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-left: 100px solid blue ;
        }
        .triangle4{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-right: 100px solid green; 
        }

看到这里你是否跟我一样想到了另一个图形呢 —— 菱形（diamond）， 简单一点就用俩个三角形拼在一起，就和上面的一样，把颜色改一改就OK了，这里就不给出代码了。

扇形（sector）

那么我们像将正方形改为圆形一样，将三角形改为扇形是不是也可以呢？

    .sector{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-bottom-color:  green ;
            border-radius: 50%；
        }

的确可以，那么我想要得到其他方向的呢，当然也可以像之前三角形一样，不过我们也可以使用transform：rotate(0deg)， 通过在里面改变他的旋转角度就可以了，这样还能得到360度不同角度的扇形，其中deg是度数单位。

    .sector{
            width: 0;
            height: 0;
            border: 100px solid transparent   ;
            border-bottom-color:  green ;
            border-radius: 50%；
            transform: rotate(255deg);
        }

梯形（trapezoid）

一样的，我们用border来实现梯形

• 可以在边框中间加一个transparent透明的方形，然后边框的其他方向也设为transparent 透明的，在需要的构建梯形的方向设置好颜色就好了
• 也可以直接给宽度（width）或者高度（height）设置一个数

.trapezoid{
            width: 50px;
            height: 50px;
            background: transparent;
            border-bottom: 100px solid red ;
            border-top : 100px solid yellow ;
            border-left: 100px solid blue ;
            border-right: 100px solid green; 
        }

之后，只要将其他方向的边框设为transparent 透明的即可。

我们也可以直接设置一个宽：

.trapezoid {
            width: 70px;
            height: 0;
            border: 100px solid transparent   ;
            border-bottom-color:  green ;
        }

最后

这些最基础的图形一定要会哦，说不定你的面试官就来了一句： “你会用css画图吗？”

还有哪些图形可以画呢，大家也可以想想