使用CSS以弧的形式顯示位置圖標

如何以弧的形式定位標記並且它們是可點擊的鏈接。使用CSS以弧的形式顯示位置圖標

<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>

我需要的圓弧如上image.Can任何一個可以幫助我如何做到這一點？ Thankyou。

來源

2017-05-24 Anusha

你試過用CSS已經不錯了，如果是這樣，你可以分享這個呢？ – Roberrrt

研究製作SVG元素並根據極座標添加徽標。或者只是使所有的標誌的絕對位置，仍然使用極座標 – broodjetom

我dint應用任何CSS到現在我沒有想法如何做到這一點。所以，你可以幫助我@ Roberrrt – Anusha

檢查這一項

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
.circle-container a { 
 
\t display: block; 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t width: 4em; height: 4em; 
 
\t 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'> 
 
\t <a href='#' class='deg0'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg'></a> 
 
\t <a href='#' class='deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg'></a> 
 
\t <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>

來源

2017-05-24 13:20:26

這是我需要圓弧形式的圓形 – Anusha

您可以更改css值以獲得您所需的內容。 –

使用CSS以弧的形式顯示位置圖標

回答

相關問題