円の上に縦線を作成するにはどうすればいいですか？ （画像例あり）

Question

HTMLとCSSのアイデアは何ですか？あなたが唯一のCSSを必要と

Answer 1

、フォームを作成する。これによりその

<div class="circle-border"> 
    <div class="circle-image"> 
     <img ....> 
    </div> 
</div> 

とCSSの

.circle-border{ 
    overflow:hidden; 
    border-radius:50%; 
    position:relative; 
    width: 200px; //for example 
    height:200px; //for example 
} 
.circle-image{ 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%; 
    border:8px rbba(255,255,255,.6); 
} 
.circle-border img{ 
    width:100%; 
    object-fit:cover; 
    } 

のようなマークアップ、唯一の最新デザインを調整する必要があります。他の多分最も簡単な方法は、恐らくあなたが必要とするもののために有益に素晴らしい効果をデザインに提供するiHoverのようなライブラリを使用することです。

縦線の場合は問題ありません。他のdivのイメージマークアップをenvolveし、divを絶対位置で設定し、 "top"：50％とmargin-top：を設定するだけで、イメージとコンテンツを持っているdivを "相対"にする必要があります。 - 円のイメージのサイズのピクセルは、同じ値で左の位置を設定します。 HTMLは、そのようなことがあります。

<article> 
<section class="container-image"> 
<div class="circle-border"> 
    <div class="circle-image"> 
     <img ....> 
    </div> 
</div> 
<section class="content"> 
<!-- your content here--> 
</section> 

Answer 2

ああ！私はこれを知っています。おそらく最高の解決策ではありませんが、私は.class:afterを使用しました（したがって、円の後に続く垂直線）。

次に普通のものを書きます：content:''; background-color:#______; height; width。

position:relative、position:absolute、left:50%を使用できます。 また、CSSアニメーションを使用してそれを行うこともできますが、1または2ピクセルなので違いはありません。

希望します。

Answer 3

CSS Flexboxを使用できます。私のスニペットを見て：

.timeline-holder { 
 
    position: relative; 
 
} 
 

 
.timeline-holder:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 75px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 1px; 
 
    height: calc(100% - 75px); 
 
    background: #ccc; 
 
    z-index: -1; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 60px 0; 
 
} 
 

 
.box .text { 
 
    flex: 1; 
 
    padding: 0 20px; 
 
} 
 

 
.box img { 
 
    border-radius: 50%; 
 
} 
 

 
.box:nth-child(even) { 
 
    margin-right: calc(50% - 75px); 
 
} 
 

 
.box:nth-child(odd) { 
 
    flex-direction: row-reverse; 
 
    margin-left: calc(50% - 75px); 
 
}

<div class="timeline-holder"> 
 
    <div class="box"> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div> 
 
    <img src="http://placehold.it/150x150" alt="" /> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div> 
 
    <img src="http://placehold.it/150x150" alt="" /> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div> 
 
    <img src="http://placehold.it/150x150" alt="" /> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div> 
 
    <img src="http://placehold.it/150x150" alt="" /> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</div> 
 
    <img src="http://placehold.it/150x150" alt="" /> 
 
    </div> 
 
</div>

・ホープ、このことができます！