CSS绘制三角形 扇形

CSS绘制三角形 扇形主要用到的是border属性，也就是边框。

平时在给盒子设置边框时，往往都设置很窄，实际上，border属性是右三角形组成的，例子：

.div{
  transform: scale(0.5,0.5);
    width: 0;
    heigt: 0;
    border-radius: 0px;
    border-right: 50px solid blue;
    border-top: 50px solid ;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
}

.要显示三角，只需要设置transparent 透明

div{
  transform: scale(0.5,0.5);
    width: 0;
    heigt: 0;
    border-radius: 0px;
    border-right: 50px solid transparent;
    border-top: 50px solid ;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
}