请用css画一个三角形？

小宁这里
202 阅读2分钟

面试官： 请用css画一个三角形？

在前端面试的过程中通常会问到关于css相关的问题，有时候会被问到请用css画一个三角形让你现场用css画一个三角形出来那么这个问题可能对于初次碰到它的兄弟来讲可能是一脸懵逼

QQ图片20221211101549.gif

这css怎么能和三角形挂上边呢？？？

或者有些兄弟们可能听说过用css能画三角形但是就是记不起来 那么本期文章呢就是分析一下这个三角形是怎么画出来的呢？ 首先我们在html部分写一个类名叫box的盒子 给这个盒子宽高分别为150px 通常情况下我们都是给它加上一个宽度为1的border 当我们把border的宽度调成为50的时候它的效果只不过看起来边框更粗了一点而已但是当把它四个边框设置成不同颜色时候这时你就会发现一个奇怪的事情发生了相邻两条边的border相交处竟然是斜线 QQ图片20221211103124.png



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 150px;
      height: 150px;
       border-top: 50px solid red;
      border-right: 50px solid yellow;
      border-bottom: 50px solid green;
      border-left: 50px solid orange;
    }  
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>

那么我们接下来在做一个更大胆的改变把类名box这个div的宽高都设置为0的时候 这样设置之后奇怪的事情又发生了box现在只由4条边对应的border构成而每一条边对应的border现在都是一个等腰直角三角形因为每一条边对应的颜色都不一样 现在还很难显示出来一个独立的三角形 当我们吧任意三条边设置成透明之后

QQ图片20221211102458.png

.box {
      width: 0px;
      height: 0px;
       border-top: 50px solid red;
      border-right: 50px solid yellow;
      border-bottom: 50px solid green;
      border-left: 50px solid orange;
    }

QQ图片20221211104041.png

一个独立的三角形就出来了！只要有一个border有颜色另外三个border设置成透明就可以了！

 .box {
      width: 0px;
      height: 0px;
      border-top: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid orange;
    }

在分析一下这个图中的特点

QQ图片20221211104727.png 就可以发现任意两个相邻的border对应的三角形它是可以组合成一个大的三角形所以我们只需要在做一点改变就可以了比如说让上边的borer和右边的border都是同一种颜色而下边的border和左边的border都是透明的那么就会出现这样的三角形

QQ图片20221211105507.png

 .box {
      width: 0px;
      height: 0px;
      border-top: 50px solid red;
      border-right: 50px solid red;
      border-bottom: 50px solid transparent;
      border-left: 50px solid orange;
    }

兄弟们现在看来用css画三角形那不是so easy吗？

关注我！让你面试的时候不迷路我是小宁我们下期再见！

avatar
文章
阅读
粉丝