css三角形

虽然现在的带宽速度已经足够加载图片，但是使用css来生成三角形仍然可以压缩页面资源大小以及获得比粗暴插入图片更好的样式。

---

利用css盒模型的border创建三角形

<div></div>
<style>
	/*div长宽设置为0，四周border设为同样的值，三个border颜色设置为transparent另一个border设置为想要的三角形的颜色便可得到一个直角三角形*/
  div {
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent transparent red;
  }
  /*可以得到一个下边的红色三角形*/
</style>

不过这样得到的三角形其他三个部分仍然占用空间，只是我们把它设置为了透明。

再将border-top的width设置为0即可：

<div></div>
<style>
  div {
    width: 0;
    height: 0;
    border-width: 0 20px 20px;
    border-style: solid;
    border-color: transparent transparent red;
  }
</style>

利用两个三角形重叠形成三角形环

<div class="tri_big">
</div>
<style>
  div.tri_big {
    position: relative;
    width: 0;
    height: 0;
    border-width: 0 20px 20px;
    border-style: solid;
    border-color: transparent transparent red;
  }
  div.tri_big:after {
    content: '';
    position: absolute;
    left: -16px;
    top: 3px;
    width: 0;
    height: 0;
    border-width: 0 16px 16px;
    border-style: solid;
    border-color: transparent transparent yellow;
  }
</style>

绘制左/右直角三角形

右直角三角形将border-left设置为0

<div class="tri"></div>

<style>
  div.tri {
    width: 0;
    height: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: transparent transparent red;
  }
</style>

左直角三角形将border-right设置为0

<div class="tri"></div>

<style>
  div.tri {
    width: 0;
    height: 0;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-color: transparent transparent red;
  }
</style>