Как установить динамическое число для поля слева от элемента div с абсолютным положением в css

Question

Как видно из определения класса .half-circle:nth-child в моем CSS ниже, я пытаюсь установить динамическое значение поля слева для каждого абсолютно позиционированного <div> того же класса, но я не могу заставить его работать.

.header-paymentback-panel{
position: relative; 
float: left;
width: 225px;
height: 150px;
background: #f5f5f5;
border: 2px solid #eaeaea;
border-radius: 5px;
display: inline-block;
}

.half-circle {
position: absolute;
bottom: -2px;
float: left;
width: 45px;
height: 30px;
background-color: #fff;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border: 2px solid #eaeaea;
border-bottom: 0;
}

.half-circle:nth-child(n) {
 margin-left: /* (20px * item index) */
}

HTML:

<div class="header-paymentback-panel">

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

</div>

Ваша помощь приветствуется.

Answer 1

Без каких-либо дополнительных элементов вы можете использовать несколько фонов , включая radial-gradient для кругов и linear-gradient для границ - см. Демонстрацию ниже:

div {
  width: 225px;
  height: 150px;
  background: radial-gradient(circle at bottom, #fff 20px, #eaeaea 21px, transparent 23px) bottom left / 33.33% 25px repeat-x, /* circles repeating horizontally */
              linear-gradient(#eaeaea, #eaeaea) left / 2px 100% no-repeat, /* left border */
              linear-gradient(#eaeaea, #eaeaea) right / 2px 100% no-repeat,  /* right border */
              linear-gradient(#eaeaea, #eaeaea) bottom / 100% 2px no-repeat,  /* bottom border */
              linear-gradient(#eaeaea, #eaeaea) top / 100% 2px no-repeat,  /* top border */
             #f5f5f5 /* this color fills other areas */;
  border-radius: 5px;

}

<div></div>

Answer 2

Вы можете добавить родителя к элементам .half-circle.

Например, .half-circle-container и отдай position: absolute;

Затем добавьте элементы .half-circle с display: inline-block;

После этого вы можете установить margin-left для .half-circle по своему желанию. Смотрите код ниже:

.header-paymentback-panel {
  position: relative;
  float: left;
  width: 225px;
  height: 150px;
  background: #f5f5f5;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  display: inline-block;
}

.half-circle-container {
  position: absolute;
  bottom: -2px;
  left: 0;
}

.half-circle {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 30px;
  background-color: #fff;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border: 2px solid #eaeaea;
  border-bottom: 0;
  margin-left: 20px; //Change here
}

<div class="header-paymentback-panel">
  <div class="half-circle-container">
    <div class="half-circle"></div>
    <div class="half-circle"></div>
    <div class="half-circle"></div>
  </div>
</div>