circle-div的CSS金字塔

问题描述 投票:-1回答:1

我想在我的网页中获得一个金字塔/圆形的三角形。但是我正在努力使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%;
}
html css css-shapes
1个回答
1
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.