我们在一些初级前端工程师的面试中, 经常会遇到让手写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画任何三角形都难不倒你了!