html - 将图标放入圆圈

如何将多个<img>元素放置在一个圆圈中，并使这些元素都是可单击的链接？我希望它看起来像下面的图片，但我不知道如何达到这种效果。
这可能吗？

最佳答案

是的，这是非常可能和非常简单的使用只是CSS。你只需要清楚地记住你想要与图片链接的角度（我在最后添加了一段代码，只是为了在你悬停的时候显示角度）。
demo
你首先需要一个包装纸。我把它的直径设置为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轴平移物体，第二旋转变换将物体返回到位置-AA>。
这种方法的优点是它是灵活的。可以添加不同角度的新图像，而不改变当前结构。
代码段

    .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。
编辑：demo to illustrate how this works（在IE8和IE7中测试）