我想在我的网页中获得一个金字塔/圆形的三角形。但是我正在努力使CSS正确。我有圆圈,但我一直努力将其对齐为正确的形状,有时它们没有居中,有时它们怪异地散开了。现在尝试了一段时间,我们将不胜感激:D
示例:
o
o o
o o o
o o o o
圆圈:
.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 {
content:"";
float:left;
height:100%;
width:50%;
shape-outside:linear-gradient(to bottom right,#fff 50%,transparent 0);
/* To illustrate */
background :linear-gradient(to bottom right,yellow 50%,transparent 0);
}
.box > div {
height:100%;
}
.box > div:before {
content:"";
float:right;
height:100%;
width:50%;
shape-outside:linear-gradient(to bottom left ,#fff 50%,transparent 0);
/* To illustrate */
background :linear-gradient(to bottom left,grey 50%,transparent 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>