CSS3制作三角形

序

今天和小伙伴讨论了下ＣＳＳ下三角形的制作，折腾了半天终于得到了结论。现在匆匆写下作为记录，同时也能给看这篇文章的大家作为参考吧。

正文

在讨论这个问题之前，我想先问大家还记得第一次看教材资料时盒模型上面是怎么说的？没错，你一定会想到！教材是用实物相框作为参考的。那么，你知道相框的边框是怎么做出来的嘛？

先来张相框的图吧，临时从网上下的也有那个意思了。大家看边框，它的上下左右四边分界线是通过对角线划出来的。那么盒模型既然是从实物抽象参考出来的，那么实现应该也差不多吧？

我们上代码来看看～

<!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>

猜你喜欢