2018/08/09 关于border的总结

[ChenPt]

可以看到border的四个方向实际上都是一个梯形。上底边，也就是短的那一边，实际上是content的宽度

如果把块的宽度和高度都设置为0，那么，border四个方向的梯形的上底边的宽度都为0，成了一个点，梯形就成为了三角形，可以通过设置其他3个方向的border的颜色为透明，就可以得到一个三角形。

<div class="triangle"></div>

border-width , border-color 都是一个组合CSS属性，由四个方向的构成。都是上右下左这个顺序

扇形

<style>
.sector {
  box-sizing: border-box;
  width: 0;
  height: 0;
  border-width: 80px 40px;
  border-style: solid;
  border-color: red transparent transparent;
  border-radius: 50px;
}
</style>
<div class="sector"></div>