将图标放置到圆圈中

Question

如何将几个元素放置在另一个元素周围的圆中，并使这些元素也都可单击链接？我希望它看起来像下面的图片，但是我不知道如何实现这种效果。

这有可能吗？

Answer 1

是的，仅使用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;

        /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/

        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); } /* 12em = half the width of the wrapper */

    .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 class='circle-container'>

        <a href='#' class='center'><img src='image.jpg'></a>

        <a href='#' class='deg0'><img src='image.jpg'></a>

        <a href='#' class='deg45'><img src='image.jpg'></a>

        <a href='#' class='deg135'><img src='image.jpg'></a>

        <a href='#' class='deg180'><img src='image.jpg'></a>

        <a href='#' class='deg225'><img src='image.jpg'></a>

        <a href='#' class='deg315'><img src='image.jpg'></a>

    </div>

另外，您可以通过使用链接的背景图像而不是使用img标签来进一步简化HTML 。