Tạo một phù hợp với vòng tròn ở giữa

Question

Vì vậy, tôi đang cố gắng để đạt được kết quả này:

Đây là những gì tôi nhận được khi tôi đã cố gắng: https://jsfiddle.net/wvdkmjge/

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
} 
 
.circle { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
}

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

 
    </div> 
 
</div>

Hơn nữa, tôi muốn rằng tôi sẽ không nhìn thấy đường biên giới trên đường tròn. Bất kỳ đề xuất?

Answer 1

Một sửa đổi nhỏ cho mã của bạn để position các yếu tố và bạn sẽ có được hiệu ứng bạn muốn đạt được.

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
    position: relative; 
 
} 
 
.circle { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: white; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -6px; 
 
    left: calc(50% - 5px); 
 
} 
 
.blue { 
 
    margin-top: 20px; 
 
    background: #3EB2EF; 
 
} 
 
.blue .circle { 
 
    background: #3EB2EF; 
 
    border-color: #3EB2EF; 
 
}

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

 
    </div> 
 
</div> 
 

 
<div class="container blue"> 
 
    <div class="circle"> 
 

 
    </div> 
 
</div>

Answer 2

Nếu bạn muốn xác định vị trí một yếu tố phụ thuộc vào cha mẹ của nó, sử dụng position:relative cho phụ huynh và sau đó thêm vị trí tương đối hoặc tuyệt đối cho đứa trẻ. để tập trung một cái gì đó ở giữa, sử dụng margin:0 auto và nếu nó có vị trí tuyệt đối cũng thêm left:0; right:0;

https://jsfiddle.net/azizn/e4ev3awj/1/

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: blue; 
 
    position:relative; 
 
} 
 
.circle { 
 
    display:inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    position: absolute; 
 
    background:blue; 
 
    left:0; 
 
    right:0; 
 
    margin:0 auto; 
 
    border-radius: 100%; 
 
    top:-4px; 
 
}

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

 
</div> 
 
</div>

Answer 3

Hãy thử điều này:

.container { 
 
    width: 100px; 
 
    height: 1px; 
 
    background-color: black; 
 
    position: relative; 
 
} 
 
.circle { 
 
    position: absolute; 
 
    top: -5px; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    border-radius: 50%; 
 
}

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

 
    </div> 
 
</div>

Answer 4

Fiddle

này sử dụng rất nhiều mã khác nhau thứ vi ở trên.

class:before and class:after 

Hy vọng điều này sẽ giúp bạn!

Answer 5

hơi muộn để trả lời, nhưng điều này có vẻ giống như một điển hình <hr/> mà cần một số makup.

/* restyle however your needs are hr and its pseudo elements , here only one is used */ 
 
hr { 
 
    color: turquoise; 
 
    border-width: 3px; 
 
    margin: 1em; 
 
    box-shadow: 0 0 5px gray; 
 
} 
 
hr:before { 
 
    content: ''; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    height: 20px; 
 
    width: 20px; 
 
    background: turquoise; 
 
    left: 50%; 
 
    margin: -10px; 
 
    box-shadow: inherit 
 
}

<hr/>