技術標籤：CSScsscss3

1. 空心扇形
   

.cirlc {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border-top: 100px solid red;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
    }

2. 梯形
   

.cirlc {
        width
 
: 100px;
        height: 100px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top: 100px solid red;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
 

        border-right: 100px solid transparent;
    }

3. 實心扇形
   

 .cirlc {
        width: 100px;
        height: 100px;
    }
    .in {
        border-radius: 50%;
        border-top: 100px solid red;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
 

    }

 <div class="cirlc">
        <div class="in"></div>
    </div>

4. 三角形
   

.triangle {
        width: 0;
        border-top: 100px solid red;
        border-bottom: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
    }