如何创建四个季度的圈子

Question

是否可以创建一个只有四个季度的CSS的圈子？

我不能做得比：

.circle { 
 
    border-radius: 50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    colour: red; 
 
}

<div class="circle">&nbsp;</div>

Answer 1

轻松...使用边框和旋转。

.circle { 
 
    margin: 1em auto; 
 
    border-radius: 50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
    border-width: 20px; 
 
    border-style: solid; 
 
    border-color: red green blue yellow; 
 
    transform: rotate(45deg); 
 
}

<div class="circle"></div>

你甚至可以有颜色的空心圆。

.circle { 
 
    border-radius: 50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    box-sizing: border-box; 
 
    border-width: 20px; 
 
    border-style: solid; 
 
    border-color: red green blue yellow; 
 
    transform: rotate(45deg); 
 
} 
 
.wide { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="circle wide"></div>

或许与伪元素（不需要转动），只是梯度。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1em auto; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    border: 6px solid pink; /* borders on it too */ 
 
} 
 
.circle::before, 
 
.circle::after { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
    top: 0; 
 
} 
 
.circle::before { 
 
    left: 0; 
 
    background: linear-gradient(green, green 50%, yellow 50%); 
 
} 
 
.circle::after { 
 
    left: 50%; 
 
    background: linear-gradient(red, red 50%, blue 50%); 
 
}

<div class="circle"></div>

Answer 2

这会为你做它https://jsfiddle.net/DIRTY_SMITH/bpxr7858/

HTML

<div id="container"> 
    <div id="part1-wrapper" class="cover"> 
     <div id="part1" class="pie"></div> 
    </div> 
    <div id="part2-wrapper" class="cover"> 
     <div id="part2" class="pie"></div> 
    </div> 
     <div id="part3-wrapper" class="cover"> 
     <div id="part3" class="pie"></div> 
    </div> 
    <div id="part4-wrapper" class="cover"> 
     <div id="part4" class="pie"></div> 
    </div> 
</div> 

CSS

#container { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 

.cover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    clip: rect(0 100px 100px 50px); 
} 

.pie { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    clip: rect(0 50px 100px 0px); 
} 

#part1-wrapper { 
    transform: rotate(0deg); 
} 

#part1 { 
    background-color: red; 
    transform: rotate(90deg); 
} 
#part2-wrapper { 
    transform: rotate(90deg); 
} 

#part2 { 
    background-color: green; 
    transform: rotate(90deg); 
} 
#part3-wrapper { 
    transform: rotate(180deg); 
} 

#part3 { 
    background-color: yellow; 
    transform: rotate(90deg); 
} 
#part4-wrapper { 
    transform: rotate(270deg); 
} 

#part4 { 
    background-color: blue; 
    transform: rotate(90deg); 
} 

Answer 3

当然（https://jsfiddle.net/to42ug5y/），你坚持不过才4个季度：

<div id="circle"> 
    <div id="q1" class="quarter"></div> 
    <div id="q2" class="quarter"></div> 
    <div id="q3" class="quarter"></div> 
    <div id="q4" class="quarter"></div> 
</div> 

CSS：

#circle { 
    display: block; 
    padding: 0; 
    width: 200px; 
    height: 200px; 
    border: 1px; 
    border-radius: 50%; 
    overflow: hidden; 
} 
.quarter { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 100px; 
    height: 100px; 
} 

#q1 { 
    background-color: #f00; 
} 

#q2 { 
    background-color: #0f0; 
} 

#q3 { 
    background-color: #00f; 
} 

#q4 { 
    background-color: #0ff; 
}