用css将5张图片放在一个圆圈中

Question

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

       *
    *     *
     *   *

主块{

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-repeat: no-repeat 和 背景大小：初始；到 div > 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 ;
}