用边框属性书写三角形

前言：

大家都知道html中的边框属性，可以为容器在四个不同的方向添加一个边框。但是，却很少有人知道还可以用其来书写三角形。接下来，我们来讲述如何使用边框来书写三角形。

正文如下：

首先，我们先用div标签书写一个盒子，并且把盒子的四个边框都设置为不同的颜色和宽度，接着在css中书写以下代码：

div{
            width: 200px;
            height: 200px;
            border-top: 50px solid red;
            border-right: 50px solid green;
            border-bottom: 50px solid pink;
            border-left: 50px solid yellow;
            background-color: burlywood;
        }

效果图如下：

 接着，我们把div的宽高都设置为0，又会发生什么呢？代码如下：

div{
            width: 0px;
            height:0px;
            border-top: 50px solid red;
            border-right: 50px solid green;
            border-bottom: 50px solid pink;
            border-left: 50px solid yellow;
            background-color: burlywood;
        }

效果图如下：

如上图所示，这时我们已经看见了出来了四个三角形。但是，如果我们只需要一个三角形，又该如何实现呢？下面提出一个需求，如果想要上图中的那个粉色三角形，我们应该如何实现呢？具体实现如下：

这时我们只需要将除了底部的粉色边框外的其他的三个边框，都设置为透明色即可（transparent）,【注意：上面代码中我们为了可以看见盒子，给盒子设置了背景颜色，要注意把盒子的背景颜色一并注释掉，这样才能看见三角形】代码实现如下：

div{
            width: 0px;
            height:0px;
            margin: 0 auto;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid pink;
            border-left: 50px solid transparent;
            /* background-color: burlywood; */
        }

效果图如下：

如上图所示，我们就可以看见粉色三角形已经出来了。

最后，如果我们想要改变三角形的大小，只需要改变边框的宽度即可实现。【注意：有的人可能会说那我可以把边框颜色设置成白色呀，这样一样看不见其余的边。但是我们要注意我们的浏览器页面可能也会有背景颜色，如果浏览器页面不是白色的话，那三角形就会“露馅”了。但是透明色就不一样了，因为它可以透所有的颜色。】 

此篇分享到这就结束了，欢迎大家批评指正！