是的，仅使用CSS很有可能而且非常简单。您只需要
清楚要与图像链接的角度即可
（我在末尾添加了一段代码，用于在
您悬停其中一个角度时显示它们）。
演示
您首先需要一个包装器。我将其直径设置为24em（width: 24em; height: 24em;这样做），您可以将其设置为任何所需的直径。你给它
position: relative;。
然后，将带有图像的链接
水平和垂直放置在该包装的中心。你这样做，通过设置position: absolute;，然后top: 50%; left: 50%;与margin: -2em;（其中2em一半的与图像，我已经设置为链接的宽度4em-再次，你可以
改变它到任何你想要的，但不要忘了改利润率这种情况）。
然后，确定要与图像建立链接的角度，然后添加一个类deg{desired_angle}（例如deg0或之类的deg45东西）。然后，对每个这样的类应用链式CSS转换，如下所示：
.deg{desired_angle} { transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});}{desired_angle}用0，替换的地方45，依此类推…
第一个旋转变换使对象及其轴旋转，平移变换沿旋转的X轴平移对象，第二个旋转换将对象带回到位置演示中，以演示其工作原理。
这种方法的优点是它很灵活。您可以以不同角度添加新图像，而无需更改当前结构。
代码片段
.circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; border: dashed 1px; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; } .circle-container img { display: block; width: 100%; } .deg0 { transform: translate(12em); } .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); } .deg180 { transform: translate(-12em); } .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); } <div > <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> <a href='#' ><img src='image.jpg'></a> </div>另外，您可以通过使用链接的背景图像而不是使用img标签来进一步简化HTML 。
