likes
comments
collection
share

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

作者站长头像
站长
· 阅读数 2

面试官：你如何利用css画一个圆形？那又如何画出一个椭圆形？三角形呢？梯形呢···好！下一题。

前言

有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面试题。但是其实面试题并不是都是难题，就跟高考一样，其实也是有很多的送分题的。如果我们能拿下这些送分题，那我们就差不多拿下了offer的一半了！

所以不要慌，我们一起拿下面试题，顶峰相见！

利用css画出一个圆形

这个其实挺简单的，设置一个盒子，将盒子的宽高蛇尾相同，然后利用border-radius定义元素的边角弧度。当设置 border-radius: 50%; 时，这意味着元素的每个角落都会变成一个半径为该元素宽度或高度一半的圆弧。因此，如果一个元素的宽高相等，此设置将使其变成一个完美的圆形。

具体操作如下：

<style>
    .circle{
        width: 200px;
        height: 200px;
        background-color: green;
        border-radius: 50%;
    }
</style>
<body>
    <div class="circle"></div>
<body>

通过这样做我们就画出一个完美的圆啦

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

画一个椭圆

在数学中通常认为圆是一个特殊的椭圆，因为它的长轴和短轴一样长。因此如果我们想画一个椭圆，我们就将盒子的宽和高设置成不一样的值，其他的和圆的操作一样就可以了。

具体的操作如下：（为了简洁我就只放上了css内容）

.tuocircle{
        width: 200px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
    }

效果如下：

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

画一个三角形

画三角形的做法就不太一样了。我们同样设计一个盒子，但是不设置她的宽和高，，然后设置她的边框宽度以及边框颜色。为了突出三角形一般将其设置为透明色，然后再将下边框设置另外的一个颜色突出三角形。

具体的操作如下：

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

得到了这样的效果：

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

不知道大佬们有没有这个疑问？

明明设置的是边框，应该是一条宽的线啊，怎么就变成了一个三角形呢？

这透明色看不太出来，我们将其设置为另外的一个颜色，不要是绿色，再看看。

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

我们这个时候再看就会发现：

因为没有设置盒子内容的宽高，那么就没有内容，只有一个坐标。四个边框都被设置为 100px solid transparent，其实就是意味着有四个看不见的边（因为是透明的）从盒子中点（0x0）向外扩张100px。如果将其中一边换成其他颜色就可以得到以那一边为底的三角形了。

请思考如何将三角形换到左边右边上边？

这里有两种解决方法：

  1. 想三角形在哪边就将那条边颜色设计一下
  2. 将三角形进行旋转transform: rotate(90deg)；

画一个扇形

扇形其实就是将三角形和圆形相结合，只用在三角形的基础上设置一个 border-radius: 50%;就行了。

具体代码实现如下：

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

效果图如下：

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

画一个梯形

梯形其实就是将三角形的顶点变成一条边就可以了。具体点就是我们之前设置盒子没有内容，就是一个小点，此时我们将盒子内容的宽设置一下他就变成了梯形的上边了。

具体的代码实现如下：

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

此时的效果图如下：

我愿称之为最容易得分的面试题：你如何利用css画图形？前言 有很多人一听到面试题就心慌，认为我们现在的能力还不足以完成面

如果我们要使梯形在两侧的话设置高，不设置宽就行了。其实设置宽也没事，因为没有颜色，还是看不出来！

小结

这其实就是很基础的css知识，比我们之前做的又是设置浮动又是移动的简单多了，重点就是我们的想法。很简单哦，这就是第一道经典的面试题，我们已经拿下了。所以说我们的offer已经在向我们招手了！！！奥利给！兄弟们。

转载自:https://juejin.cn/post/7375275474001952804
评论
请登录