css绘制三角形及扇形

css绘制三角形。

1.正三角形（方向在正方向上）

eg：箭头向上

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

规律：箭头的方向不需要写border，与箭头方向相邻的两个方向需要样式
 

宽度 solid transparent;

与箭头方向相反的方向需要样式

宽度 solid red;

2.方向不在正方向上的

eg：箭头向右上方
 

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}

扇形

.sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }