使用css

Question

我有一个div应该可以容纳5个图像（圆形），这些形状应该旋转（但这不是问题，我可以用jQuery做到这一点）。问题是如何通过css定位图像，使它们与其他图像具有相等的距离，并且每个图像与div的中心具有相同的距离。我不知道这是否有意义但我会尝试用asterix符号表明我的意思：

       *
    *     *
     *   *

main-block {

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 500px;
border-radius: 250px;
background-color: rgba(255,255,255,0.5);

}

Answer 1

在Harry有用的链接后，我相信这是解决方案，即使我应该清除多余的代码（试图移动背景重复：不重复和 background-size：initial;到div＆gt; div选择器但是没有那么好用......

index.html页面：

<div id="main-block">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

的style.css：

#main-block {

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 500px;
    width: 500px;
    border-radius: 50%;
}

div > div {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
    transform-origin: bottom right;
    border-radius: 50%;
    }

div > div:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: transparent;
  border-radius: 50%;
  transform: translateY(50%);
}

div > div:nth-child(1) {
  transform: rotate(0deg);
  background: url(img/white-mana.png) center center;
  background-repeat: no-repeat;
  background-size: initial ;

}

div > div:nth-child(2) {
  transform: rotate(72deg);
  background: url(img/blue-mana.png) center center;
  background-repeat: no-repeat;
  background-size: initial ;
}

div > div:nth-child(3) {
  transform: rotate(144deg);
  background: url(img/black-mana.png) center center;
  background-repeat: no-repeat;
  background-size: initial ;
}

div > div:nth-child(4) {
  transform: rotate(216deg);
  background: url(img/red-mana.png) center center;
  background-repeat: no-repeat;
  background-size: initial ;
}

div > div:nth-child(5) {
  transform: rotate(288deg);
  background: url(img/green-mana.png) center center;
  background-repeat: no-repeat;
  background-size: initial ;
}