CSS 2つの要素の間に線を描く

私は一連の円の真ん中に線を描こうとしていましたが、最初の要素と最後の要素の間に線（.Line1）を設定すると、上から描画されます最初の要素の左にあり、中央にはありません。私がラインを設定する場合、中央に収まるようにパーセンテージを変更すると100％のズームがうまく見えますが、画面をズームインまたはズームアウトすると動きます。CSS 2つの要素の間に線を描く

純粋なjavascriptを使用することは可能ですが、私はcssで作成した要素を使ってそれを行う方法を理解できません。

<style> 
.A,.B,.C,.D, .E { 
position: absolute; 
width: 45px; 
height: 45px; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%; 
border: 2px solid black; 
background: lightblue; 
} 
.A { 
top: 10%; 
left: 50%; 
} 
.B { 
top: 25%; 
left: 50%; 
} 
.C { 
top: 40%; 
left: 50%; 
} 
.D { 
top: 55%; 
left: 50%; 
} 
.E { 
top: 70%; 
left: 50%; 
} 
.Line1{ 
position: absolute; 
left: 50%; 
top: 10%; 
height: 60%; 
width: 4px; 
background: black; 
} 
.Line2{ 
position: absolute; 
left: 51.3%; 
top: 15%; 
height: 60%; 
width: 4px; 
background: black; 
} 
</style> 

<body> 
<div class = "A"></div> 
<div class = "B"></div> 
<div class = "C"></div> 
<div class = "D"></div> 
<div class = "E"></div> 
<div class = "Line1"></div> 
<div class = "Line2"></div> 
</body>

http://codepen.io/anon/pen/ZWMbNe

出典

2016-04-25 C.Marks

質問* *。あなたは[**サンプルまたはサイトへのリンク**]を提供していますが（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

境界、幅、高さを考慮する必要があります。半分のピクセルを描画することはできません。たとえば、これは中心線です。

.A,.B,.C,.D, .E { 
    position: absolute; 
    width: 46px; 
    height: 46px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 2px solid black; 
    background: lightblue; 
} 

.Line1{ 
    position: absolute; 
    left: 50%; 
    top: 10%; 
    height: 60%; 
    width: 2px; 
    background: black; 
    transform: translate(24px,23px); 
}

出典

2016-04-25 12:00:34 Fonzy

ありがとう、これは完璧に動作します！ –

この解決方法は機能します。しかし、これは、弱いHTML構造のための優れたCSSハックです。 OPはHTMLをより良く構築する必要があります。 – Roy

線の一つにマージン左円の幅の半分に等しくなる与えます。ズームインまたはズームアウトしても、ラインは常に中間にとどまります。

.Line1{ 
position: absolute; 
left: 50%; 
top: 15%; 
height: 60%; 
width: 4px; 
margin-left:23px; 
margin-top:0px; 
background: black; 
}

出典

2016-04-25 11:53:56 AnatPort

サークルを親要素にラップする必要があります。黒の線は、ウィンドウのサイズではなく、親のDivに従って調整することができます。

さらに、疑似セレクタ:beforeまたは:afterを回線として使用できます。

HTML

<div class="cirCont"> 
    <div class="A"></div> 
    <div class="B"></div> 
    <div class="C"></div> 
    <div class="D"></div> 
    <div class="E"></div> 
</div>

CSS

.A,.B,.C,.D, .E { 
    width: 45px; 
    height: 45px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 2px solid black; 
    background: lightblue; 
} 

.cirCont{ 
    float:left; 
    position:relative; 
    top: 100px; 
    left: 50%; 
} 

.cirCont:after{ 
    content:""; 
    position: absolute; 
    left: calc(50% - 2px); 
    top: 10%; 
    height: 80%; 
    width: 4px; 
    background: black; 
    z-index:10; 
}

チェックアウト、この質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求めるpen

出典

2016-04-25 12:01:57 Roy

CSS 2つの要素の間に線を描く

答えて

関連する問題