我如何以弧形形式放置标签，它们是可单击的链接。
<div class="container" style="margin-top:3cm">
<input type="image" src="icons\drawable-mdpi\ic_bb_logo.png" name="saveForm" class="btTxt submit" id="saveForm"/>
<br>
<div class="display_icons" style="display:none">
<img src="icons\drawable-mdpi\ic_accesspoint.png" onclick="return ssid()">
<img src="icons\drawable-mdpi\ic_profiles.png" onclick="return profile()">
<img src="icons\drawable-mdpi\ic_water_consumption.png" onclick="return watercon()">
<img src="icons\drawable-mdpi\ic_power_consumption.png" onclick="return powercon()">
<img src="icons\drawable-mdpi\ic_logout.png" onclick="return logout()">
</div>
</div>
<script>
$(document).ready(function() {
$("#saveForm").click(function(){
$(".display_icons").toggle();
});
});
</script>
我需要如上图所示的弧线，有人可以帮我怎么做吗？
谢谢。
最佳答案
检查这个
<!DOCTYPE html>
<html>
<head>
<style>
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%;
width: 4em; height: 4em;
margin: -2em;
border-radius: 50px;
}
circle-container img { display: block; width: 100%; }
.deg0 { transform: rotate(-25deg) translate(15em); }
.deg45 { transform: rotate(-5deg) translateX(18em); }
.deg30 { transform: rotate(10deg) translate(21em) rotate(-315deg);}
.deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg);}
}
</style>
</head>
<body>
<!-- content to be placed inside <body>…</body> -->
<div class='circle-container'>
<a href='#' class='deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a>
<a href='#' class='deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a>
<a href='#' class='deg315'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
<a href='#' class='deg30'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg'></a>
</div>
<script>
</script>
</html>关于html - 使用CSS以弧线形式放置图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44159440/