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上記のように、私は弧を必要とします？ありがとうございます。

出典

2017-05-24 Anusha

そうならば、あなたにもこれを共有することができ、すでにCSSで何かをしようとしたことがありますか？ – Roberrrt

SVG要素を作成し、極座標に基づいてロゴを追加します。または、あなたのロゴを絶対的な位置にして、まだ極座標を使用してください。 – broodjetom

私はどのようにCSSを適用してもかまいません。私はRoberrrtを助けてください。 – Anusha

チェックこの1

<!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を使用して円弧の形でアイコンを配置

答えて

関連する問題