CSS circle-divs 金字塔
CSS Pyramid of circle-divs
我想在我的网页中获得 pyramid/triangle 个圈子。但我正在努力使 CSS 正确。我有圆圈,但我很难将它们对齐到正确的形状,有时它们不居中,有时它们奇怪地散开。现在已经尝试了一段时间,我们将不胜感激任何帮助:D
示例:
o
o o
o o o
o o o o
Example image
圈子:
.circle {
height: 25px;
width: 25px;
background-color: #555;
border-radius: 50%;
}
shape-outside
可以帮助您完成此任务:
.circle {
display:inline-block;
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
}
.box {
width:300px;
height:300px;
border:1px solid;
}
.box:before,
.box > div:before{
content:"";
float:var(--d,left);
height:100%;
width:50%;
shape-outside:linear-gradient(to top var(--d,left),transparent 50%,#fff 0);
/* To illustrate */
background :linear-gradient(to top left,transparent 50%,yellow 0);
}
.box > div {
height:100%;
}
.box > div:before {
--d:right;
/* To illustrate */
background :linear-gradient(to top right,transparent 50%,grey 0);
}
<div class="box">
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
我想在我的网页中获得 pyramid/triangle 个圈子。但我正在努力使 CSS 正确。我有圆圈,但我很难将它们对齐到正确的形状,有时它们不居中,有时它们奇怪地散开。现在已经尝试了一段时间,我们将不胜感激任何帮助:D
示例:
o
o o
o o o
o o o o
Example image
圈子:
.circle {
height: 25px;
width: 25px;
background-color: #555;
border-radius: 50%;
}
shape-outside
可以帮助您完成此任务:
.circle {
display:inline-block;
height: 25px;
width: 25px;
background-color: red;
border-radius: 50%;
}
.box {
width:300px;
height:300px;
border:1px solid;
}
.box:before,
.box > div:before{
content:"";
float:var(--d,left);
height:100%;
width:50%;
shape-outside:linear-gradient(to top var(--d,left),transparent 50%,#fff 0);
/* To illustrate */
background :linear-gradient(to top left,transparent 50%,yellow 0);
}
.box > div {
height:100%;
}
.box > div:before {
--d:right;
/* To illustrate */
background :linear-gradient(to top right,transparent 50%,grey 0);
}
<div class="box">
<div>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>