CSS application scenario: realizing a triangle, sector, square with adaptive width and height, 0.5px line, and font less than 12px

1. implement a triangle

.top{
   
    
    
    width: 0;height: 0;
    border-top: 50px solid rgb(101, 150, 255);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

2. Implement a fan shape

.sector{
   
    
    
    width: 0;height: 0;bor