Как нарисовать горизонтальную линию между двумя кругами с помощью css?

Как нарисовать горизонтальную линию между двумя кругами в css?Как нарисовать горизонтальную линию между двумя кругами с помощью css?

Он должен находиться посреди них, как показано на скриншоте.

Пример здесь:

Я нарисовал 2 круга, но не знаю, как соединить их.

#status-buttons a { 
 
    color: black; 
 
    display: inline-block; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    margin-right: 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    min-width: 150px; 
 
    text-decoration: none; 
 
} 
 
#status-buttons a:hover { 
 
    text-decoration: none; 
 
} 
 
#status-buttons a.active span { 
 
    color: white; 
 
    background: #ACCF5B; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 
#status-buttons span { 
 
    color: white; 
 
    background: #22bacb; 
 
    display: block; 
 
    height: 45px; 
 
    margin: 0 auto 10px; 
 
    padding-top: 20px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
}

<div id="status-buttons" class="text-center"> 
 
    <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> 
 
    <a href="#/form/tusdatos"><span>2</span> Step 2</a> 
 
</div>

См demo on JSFiddle

источник

2016-10-17 nerlijma

Вы можете использовать псевдо-элемент для вставки абсолютного позиционирования границы:

#status-buttons { 
 
    position: relative;   /* 1 */ 
 
    display: inline-block;  /* 2 */ 
 
} 
 
#status-buttons::after {  /* 3 */ 
 
    content: ""; 
 
    position: absolute; 
 
    width: 50%; 
 
    z-index: -1;     /* 4 */ 
 
    top: 35%; 
 
    left: 25%; 
 
    border: 3px solid #ACCF5B; 
 
} 
 
#status-buttons a { 
 
    color: black; 
 
    display: inline-block; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    margin-right: 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    min-width: 150px; 
 
    text-decoration: none; 
 
} 
 
#status-buttons a:hover { 
 
    text-decoration: none; 
 
} 
 
#status-buttons a.active span { 
 
    color: white; 
 
    background: #ACCF5B; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 
#status-buttons span { 
 
    color: white; 
 
    background: #22bacb; 
 
    display: block; 
 
    height: 45px; 
 
    margin: 0 auto 10px; 
 
    padding-top: 20px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
}

<div id="status-buttons" class="text-center"> 
 
    <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> 
 
    <a href="#/form/tusdatos"><span>2</span> Step 2</a> 
 
</div>

Примечание:

Establish nearest positioned ancestor for absolute positioning.
Сделать контейнер потребляет только ширину необходима.
Вставить псевдо элемент
Убедитесь, что любая горизонтальная линия перекрытия не появляется выше кругов

источник

2016-10-17 00:55:19

Спасибо! здорово. Я изменил его на элемент ссылки, поэтому он может обрабатывать несколько шагов https://jsfiddle.net/nerlijma/s5x2kmmz/10/, если это кому-то помогает! – nerlijma

@nerlijma вы можете изменить правило на '# status-buttons a: not (: last-child) :: after', если вы не хотите, чтобы линия простиралась от последней ссылки – DaveMongoose

@DaveMongoose Отличное предложение! – nerlijma

Я думаю, вы можете сделать некоторые вещи, как этот проверки следующий фрагмент кода

#status-buttons a { 
 
    color: black; 
 
    display: inline-block; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    margin-right: 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    min-width: 150px; 
 
    text-decoration: none; 
 
} 
 

 
#status-buttons a:hover { 
 
    text-decoration: none; 
 
} 
 
    
 
#status-buttons a.active span { 
 
    color: white; 
 
    background: #ACCF5B; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 

 
#status-buttons span { 
 
    color: white; 
 
    background: #22bacb; 
 
    display: block; 
 
    height: 45px; 
 
    margin: 0 auto 10px; 
 
    padding-top: 20px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 

 
div.linetop { border-top: 1px solid #111111; width:95px; 
 
position:absolute; 
 
    top:40px; 
 
    left:115px; 
 
}

<div id="status-buttons" class="text-center"> 
 
       <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> 
 
    
 
       <a href="#/form/tusdatos"><span>2</span> Step 2</a> 
 
      </div> 
 

 

 
<div class="linetop"></div>

Надеюсь, что это поможет

источник

2016-10-17 00:57:42 Geeky

Здесь вы идете.

<div id="status-buttons" class="text-center"> 
    <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> 
    <a href="#/form/tusdatos"><span>2</span> Step 2</a> 
</div> 
<div class="line"> 
</div>

CSS-

#status-buttons a { 
    position: relative; 
    color: black; 
    display: inline-block; 
    font-size: 17px; 
    font-weight: normal; 
    margin-right: 0; 
    text-align: center; 
    text-transform: uppercase; 
    min-width: 150px; 
    text-decoration: none; 
     z-index: 1; 
} 

#status-buttons a:hover { 
    text-decoration: none; 
} 

#status-buttons a.active span { 
    color: white; 
    background: #ACCF5B; 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
} 

#status-buttons span { 
    color: white; 
    background: #22bacb; 
    display: block; 
    height: 45px; 
    margin: 0 auto 10px; 
    padding-top: 20px; 
    width: 60px; 
    border-radius: 50%; 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 

} 
.line { 
    position: absolute; 
    border-bottom: 5px solid black; 
    width: 20%; 
    left: 71px; 
    top: 39px; 
    z-index: 0; 
}

https://jsfiddle.net/norcaljohnny/nwjz2010/

источник

2016-10-17 00:58:36

Вы можете добавить новый элемент и расположите его между двумя кругами:

#status-buttons a { 
 
    color: black; 
 
    display: inline-block; 
 
    font-size: 17px; 
 
    font-weight: normal; 
 
    margin-right: 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    min-width: 150px; 
 
    text-decoration: none; 
 
} 
 

 
#status-buttons a:hover { 
 
    text-decoration: none; 
 
} 
 
    
 
#status-buttons a.active span { 
 
    color: white; 
 
    background: #ACCF5B; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 

 
#status-buttons span { 
 
    color: white; 
 
    background: #22bacb; 
 
    display: block; 
 
    height: 45px; 
 
    margin: 0 auto 10px; 
 
    padding-top: 20px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; 
 
} 
 

 
#line { 
 
    position: absolute; 
 
    top: 42px; 
 
    left: 112px; 
 
    width: 96px; 
 
    height: 5px; 
 
    background: #ACCF5B; 
 
}

<div id="status-buttons" class="text-center"> 
 
       <a href="#/form/regalo" class="active"><span>1</span> Step 1</a> 
 
       <div id="line"> 
 
       </div> 
 
       <a href="#/form/tusdatos"><span>2</span> Step 2</a> 
 
      </div>

источник

2016-10-17 00:58:36 Dekel

Вот одно решение:

https://jsfiddle.net/sfyuxrs9/

Он содержит div (который образует линию), которая имеет position: absolute и отрицательное значение z-index.Остальная часть просто регулирует все значения для ширины/высоты/верхней и левой

источник

2016-10-17 00:59:04 Johannes

Как нарисовать горизонтальную линию между двумя кругами с помощью css?

ответ

Смежные вопросы