CSS训练合集——绘制三角形

我们在一些初级前端工程师的面试中, 经常会遇到让手写css绘制三角形的考题, 有等边三角形, 有直角三角形, 网络上实现方法的教程也非常的多, 但是你真的知道原理吗?

我们在遇到问题的时候经常直接百度, 大部分都有相应的答案, 我们去试一下答案没啥问题, 以后再遇到这种问题就套这个答案。这是对自己非常不负责的, 一定要知道原理, 知道为什么, 问题永远都不是独立存在的。要有举一反三的能力。

今天我们CSS训练的内容是绘制三角形

我们在写前端的时候遇到的大部分都是矩形、正方形, 宽高相等的盒子加个border-radius 50%可以成为圆形, 但是如果让你实现一个三角形, 你有什么思路吗?

先问大家一个问题, 如果让你把一个正方形分为四等份, 你会如何分?

可能最常规的思路就是横着一刀, 竖着一刀, 分为了四个相等的正方形。

那我如何沿着正方形的对角线, 斜着左一刀, 右一刀呢。

正方形是不是被我分为了四个相等的三角形了, 没错这就是CSS实现绘制三角形的主要思路, 因为我们在前端中遇到太多的盒子了, 一定要从盒子下手。

那么问题就来了, 我们如何使用CSS把一个正方形沿对角线切开呢。

这就需要用到border的特性了。

<div id="app"></div>
 #app {
            width: 0;
            height: 0;
            border: 200px solid #000;
        }

代码中id为app的div, 在页面上会渲染成什么样子?

我们把div的宽高都写成了0, 然后给它加了一个很大的border

经过实际测试, 页面上渲染的结果是一个正方形

你能想到这个正方形是怎么样形成的吗?

我是给border整体给的宽度, 它的上下左右边框都会有这个宽度, 那这四个边框是如何拼接成一个正方形的呢

只靠想象可能不好看出来, 我们给它四个边框都上一个颜色

  #app {
    
    
            width: 0;
            height: 0;
            border: 200px solid #000;
            border-top-color: #f00;
            border-left-color: #0f0;
            border-right-color: #00f;
        }

哦吼, 是不是很神奇, 它的四个边框是以这种形式拼接的, 所以你想到使用CSS绘制三角形的方法了吗?

我们只需要将它对应位置的边框给隐藏掉即可, 比如:

    #app {
    
    
            width: 0;
            height: 0;
            border: 200px solid transparent;
            border-bottom-color: #f00;
        }

我们只保留下边的边框, 其它位置的设置为透明, 这样就实现了一个等边三角形

同理, 直角三角形

   #app {
    
    
            width: 0;
            height: 0;
            border: 200px solid transparent;
            border-bottom-color: #f00;
            border-left-color: #f00;
        }

相信你知道CSS绘制三角形的原理后, 以后再让你用CSS画任何三角形都难不倒你了!

CSS训练合集——绘制三角形

猜你喜欢