有一个比较有意思的现象,当给一个宽高为0四个边框的div不同颜色是,会出现四个不同颜色的拼合的三角形

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: yellow orange red blue;
}

效果图

QQ截图20160708225027.png

那么进一步发散,我们想实现是不是可以通过这个现象实现一个三角形呢?

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: yellow transparent transparent transparent;
}

我们将其他几条边框设为透明,剩下就一个三角形了

QQ截图20160708225418.png