css画三角形

我之前还是真没有用过 css画三角形，用的切图。
但是切图要请求网络上的资源。可能不划算
所以就要实现 css画各种三角形

先看一下原理吧，将div的width和heigh设置为0后，border设置宽度和颜色，具体就实现一下的效果。通过控制边框的颜色设置为transparent(透明)。即可显示想要的三角形。

code

<style>
div{
  width:0;
  height:0;
  border-top: 100px solid red;
  border-left: 100px solid green;
  border-right: 100px solid black;
  border-bottom: 100px solid orange;
}
</style>
<div>

</div>

效果图如下：

2018-01-31_132425.png

1.正三角形

<style>
div{
  width:0;
  height:0;
  border-top: 100px solid transparent;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid orange;
}
</style>
<div>

</div>

正三角.png

其余不一一列举了。