CSSで円の円を描く

Question

私は円の中心から所定の度合いに基づいて境界線の外に線を描く方法を理解しようとしています。 （私は最終的には30度ごとに12本の合計ラインを得たいと考えていました）

以下は私が達成しようとしているものと似たものです。

私が現在持っているサークルのためのCSS：私は開始すべきところは本当にわからないんだけど

.circle-container{ 
    display: block; 
    position: absolute; 
    top: 15.5%; 
    left: 14.5%; 
    background: #fff; 
    width: 11.5em; 
    height: 11.5em; 
    border-radius: 50%; 
    border-style: solid; 
    border-width: thin; 
    border-color: #bfbfbf; 
    margin: 0em; 
} 

。キャンバス要素やSVG

Answer 1

私はキャンバスを使用したいですまたはSVG ...そうでなければ、スタイリングの目的のためにたくさんの非凡な要素に終わるでしょう。しかし

、簡単な例

.circle-container { 
 
    display: block; 
 
    position: absolute; 
 
    top: 15.5%; 
 
    left: 14.5%; 
 
    background: #fff; 
 
    width: 11.5em; 
 
    height: 11.5em; 
 
    border-radius: 50%; 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-color: #bfbfbf; 
 
    margin: 0em; 
 
} 
 
.radius { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 3px; 
 
    left: 50%; 
 
    top: 50%; 
 
    background: red; 
 
    transform-origin: left center; 
 
} 
 
.two { 
 
    background: green; 
 
    transform: rotate(-30deg); 
 
}

<div class="circle-container"> 
 
    <div class="radius"></div> 
 
    <div class="radius two"></div> 
 
</div>

Answer 2

が容易になるだろう、しかし、あなただけの単純なHTML要素のCSSスタイルを使用したい場合は、CSSのクロックを作成するために、このチュートリアルを見てみましょう： https://cssanimation.rocks/clocks/

Answer 3

あなたは、0に高さプロパティを設定することにより、直径の半分との境界線を作成している50%に幅を、ラインを作成することができます。

変換するにはtransform-originと一緒にrotateプロパティを使用します。

ここは簡単な例です。のは、そのことについて考えてみましょう、30度ごとの行を持つなどについては

var radius = document.getElementById("radius"); 
 
var rotate = document.getElementById("rotate"); 
 

 
var rotation = 0; 
 

 
rotate.addEventListener("click", function() { 
 
    rotation -= 30; 
 
    radius.style.transform = "rotate(" + rotation + "deg)"; 
 
    radius.style.transformOrigin = "center right"; 
 
});

.circle-container{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 15.5%; 
 
    left: 14.5%; 
 
    background: #fff; 
 
    width: 11.5em; 
 
    height: 11.5em; 
 
    border-radius: 50%; 
 
    border-style: solid; 
 
    border-width: thin; 
 
    border-color: #bfbfbf; 
 
    margin: 0em; 
 
} 
 

 
#radius { 
 
    height: 0px; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    top: 50%; 
 
    position: absolute; 
 
}

<div class="circle-container"> 
 
    <div id="radius"></div> 
 
</div> 
 

 
<button id="rotate">Rotate Radius</button>

。円は360度です。つまり、12行が必要です。 HTMLでは、これにはかなりのオーバーヘッドが必要です。このためには、DOM操作をたくさん行う必要があります。

キャンバス、またはjcanvasのようなJavaScriptキャンバスライブラリの1つをお勧めします。

Answer 4

超柔軟性が必要な場合は、このようなことをしてください... IDを持つ別の.lineを追加し、それぞれの角度を別々に回転させてすべての角度を取得することができます。

.line{ 
    width: 1px; 
    height: 50%; 
    background: #000; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform-origin: bottom center; 
    -webkit-transform-origin: bottom center; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
} 
.line:before{ 
    content: ''; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
    width: 15px; 
    height: 15px; 
    border-radius: 100%; 
    background: #000; 
} 

<div class="circle-container"> 
    <div class="line"></div> 
</div> 

Answer 5

別の解決策は、あなたが言ったように、あなたは12行

を必要とし、行のクローンを作成することです

はこちらを参照してください。jsfiddle

JQ：

var degr = 0; 
var rotation = 0; 
//create a rotate function 
jQuery.fn.rotate = function(degrees) { 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
}; 
//clone the lines 
for(var i = 1; i < 5; i++){ 
    $(".line").clone().appendTo(".circle-container") 
} 


//rotate the lines 
$('.line').each(function() { 

degr += 30; 
$(this).rotate(degr); 
}); 

HTML：

<div class="circle-container"> 
    <div class="line"> 

    </div> 

</div> 

CSSを追加しました：私は... SVGを使用したいそうでないあなただけのスタイリングの目的のためにunsemantic要素のLOTになってしまいます

.circle-container:before { 
    position:absolute; 
    content:""; 
    width:30px; 
    height:30px; 
    background:#000; 
    left:0; 
    right:0; 
    margin:0 auto; 
    top:calc(50% - 15px); 
    border-radius:100%; 
} 
.circle-container .line { 
    position: absolute; 
    width: 50%; 
    height: 3px; 
    left: 50%; 
    top: 50%; 
    background: #000; 
    transform-origin: left center; 
    transform: rotate(0deg); 
}