如何在css div中创建圈子？

Question

代码：

 <div className="color-container"> 
     <div className="inline" id="red"></div> 
     <div className="inline" id="green"></div> 
     <div className="inline" id="yellow"></div> 
     <div className="inline" id="blue"></div> 
    </div> 

CSS：

.color-container { 
    width: 100px; 
    height: 200px; 
    display: inline; 
    position: relative; 
} 
.inline { 
    display: inline; 
} 
#red { 
    height: 50px; 
    width: 50px; 
    background-color: red; 
    border-radius: 50% 0 0 0; 
} 
#yellow { 
    height: 50px; 
    width: 50px; 
    background-color: yellow; 
    border-radius: 0 50% 0 0; 
} 
#green { 
    height: 50px; 
    width: 50px; 
    background-color: green; 
    border-radius: 0 0 50% 0; 
} 
#blue { 
    height: 50px; 
    width: 50px; 
    background-color: blue; 
    border-radius: 0 0 0 50%; 
} 

然而没有显示，即使当我没有显示：在子内联的div元素和父我没有100px的宽度和200像素高度所以2 divs到底？

Answer 1

尝试这种方式

<div class="color-container"> 
     <div class="inline" id="red"></div><div class="inline" id="green"></div><div class="inline" id="blue"></div><div class="inline" id="yellow"></div> 
    </div> 
    <br><br> <!-- Other Way--> 
    <div class="color-container"> 
     <div class="inline" id="red"></div><!-- 
     --><div class="inline" id="green"></div><!-- 
     --><div class="inline" id="blue"></div><!-- 
     --><div class="inline" id="yellow"></div> 
    </div> 

https://jsfiddle.net/krj1egLk/3/

Answer 2

您使用的className无处不在，这是错误的，它只是类，所以你需要改变这一点：

<div className="color-container"> 

到

<div class="color-container"> 

如果你使用这个：

display: inline; 

你不能设置宽度和高度，因为内联元素不能这样做。

相反，你需要使用display：inline-block的：

.inline { 
    display: inline; 
} 

但是内嵌块有，如果你有他们之间的空间，他们将添加一个空白的div之间，所以需要删除所有问题从你的HTML这样的空间：

<div class="color-container"><div class="inline" id="red"></div><div class="inline" id="green"></div><div class="inline" id="yellow"></div><div class="inline" id="blue"></div></div> 

如果你只是想用一种颜色的圆圈，你可以这样做：

.circle { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 

}

Answer 3

这里是我的小提琴：

my fiddle

如果我理解正确的话。这是我的回答！

.color-container { 
 
     width: 100%; 
 
     height: 200px; 
 
     display: inline-block; 
 
     position: relative; 
 
    } 
 
    
 
    #red { 
 
     height: 50px; 
 
     width: 50px; 
 
     background-color: red; 
 
     border-radius: 50% 50% 50% 50%; 
 
     display: inline-block; 
 
    } 
 
    #yellow { 
 
     height: 50px; 
 
     width: 50px; 
 
     background-color: yellow; 
 
     border-radius: 50% 50% 50% 50%; 
 
     display: inline-block; 
 
    } 
 
    #green { 
 
     height: 50px; 
 
     width: 50px; 
 
     background-color: green; 
 
     border-radius: 50% 50% 50% 50%; 
 
     display: inline-block; 
 
    } 
 
    #blue { 
 
     height: 50px; 
 
     width: 50px; 
 
     background-color: blue; 
 
     border-radius: 50% 50% 50% 50%; 
 
     display: inline-block; 
 
    }

<div class="color-container"> 
 
     <div class="red" id="red"></div> 
 
     <div class="yellow" id="green"></div> 
 
     <div class="green" id="yellow"></div> 
 
     <div class="blue" id="blue"></div> 
 
</div>

Answer 4

试试这个：

#left { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    display: inline-block; 
 
    border-radius: 100% 0 0 0 
 
} 
 

 
#right { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    border-radius: 0 100% 0 0 
 
} 
 

 
#left2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
    border-radius: 0 0 0 100% 
 
} 
 

 
#right2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: black; 
 
    display: inline-block; 
 
    border-radius: 0 0 100% 0 
 
}

<div> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div> 
 
<div> 
 
    <div id="left2"></div> 
 
    <div id="right2"></div> 
 
</div>