序
今天和小伙伴讨论了下CSS下三角形的制作,折腾了半天终于得到了结论。现在匆匆写下作为记录,同时也能给看这篇文章的大家作为参考吧。
正文
在讨论这个问题之前,我想先问大家还记得第一次看教材资料时盒模型上面是怎么说的?没错,你一定会想到!教材是用实物相框作为参考的。那么,你知道相框的边框是怎么做出来的嘛?
先来张相框的图吧,临时从网上下的也有那个意思了。大家看边框,它的上下左右四边分界线是通过对角线划出来的。那么盒模型既然是从实物抽象参考出来的,那么实现应该也差不多吧?
我们上代码来看看~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study</title>
<style>
div{
width: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 100px solid #fff635;
border-right: 100px solid #127fff;
border-bottom: 100px solid #ff2ce9;
border-left: 100px solid #5cff14;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码如上所示,下面来看看运行效果:
通过代码我们能够发现,盒模型的实现中它的边框是参考了现实世界的。既然看到了这个图,我相信接下来的三角形制作大家都和我一样恍然大悟了吧。
既然,盒模型是这样的。那么我随意将任意相邻的两个边框设为透明(或者和其附近颜色一样)就可以获得一个直角三角形了,而任意三个就可以获得一个等腰三角形了。
下面放一个直角三角形代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study</title>
<style>
div{
width: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 100px solid #44463e;
border-right: 100px solid #44463e;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>