html+css制作三角形

今天我们来分享一下三角形的制作方法
主要就是通过调整div的几个边框线，将它们调节的足够宽，然后再将div的宽度和长度重新赋值为0

代码如下：

<div id="main"></div>
<style type="text/css" media="all">
    #main{
        width: 10px;
        height: 10px;
        background: #000;
        margin: 100px auto;
        border-top: 50px solid 	#FF4500;
        border-right: 50px solid #48D1CC;
        border-bottom: 50px solid #32CD32;
        border-left: 50px solid #EE82EE;
        
    }
</style>

在这里我添加了一个div，并为它的几个边框设置了不同的几个颜色，便于我们区分。大家在这里看，是不是边框已经有三角形的样子了，当我们的div的内容足够小，并且边框足够大时，那么它的四个边框就可以默认为是一个三角形了，不妨将div的高和宽重新设置为0；
那么我们下一步去将div的宽度和高度重新赋值，使其为0，效果如下：

 #main{
        width: 10px;
        height: 10px;
        background: #000;
        margin: 100px auto;
        border-top: 50px solid 	#FF4500;
        border-right: 50px solid #48D1CC;
        border-bottom: 50px solid #32CD32;
        border-left: 50px solid #EE82EE;
        width:0;
        height:0;
    }

现在我们仅仅只需要对几个不同的边框将背景色更改为透明即可。
比如我们需要某一个方向的三角形时候，也就是右边框，则只需要将div的背景颜色以及它之外的几个颜色属性设置为transparent即可，我们在这里设置颜色仅仅只是为了便于观察，在实际设计中完全可以省略掉。

当我们觉得三角形不太美观时，可以将开始的div通过调节它的宽高，使其成为矩形，进而得到我们想要的三角形。三角形可以用在许多方面，比如聊天气泡：

气泡的代码如下：

.main{
  position:relative;
  width:140px;
  height:40px;
  top:50vh;
  left:100px;
  border:1px solid #ccc;
  border-radius:6px;
  background:	#FF8C00;
}
.main:before{
  content:"";
  position:absolute;
  left:-37px;
  width:30px;
  height:30px;
  border-radius:7px;
  border-top:20px solid transparent;
  border-right:20px solid #ff8c00;
  border-left:20px solid transparent;
  border-bottom:20px solid transparent;
width:0px;
  height:0px;
}
#content{
  text-align:center; 
}
.side{
  position:absolute;
  width:20px;
  height:20px;
}

还有很多其它的用处在这里就不一一列举，其它更多的用途需要我们大家一起去发现！