Позиционирование круга и линии для временной шкалы

Я хотел бы реализовать часть временной шкалы на моем веб-сайте.Позиционирование круга и линии для временной шкалы

У меня есть фотография, как это должно выглядеть, но я не могу придумать, какой способ это сделать.

Как это должно выглядеть:

enter image description here

Фактический код: js fiddle

<div class="right "> 
    what should I put here to get that circle? 
</div>

Наиболее запутанной частью, как получить этот круг и эту линию вместе?

Может ли кто-нибудь предложить что-нибудь?

спасибо.

источник

2014-11-07 Morpheus

Вы не хотите использовать изображение? –

Это хорошая идея? Я беспокоюсь, потому что, как он будет выглядеть на разных размерах экрана ... – Morpheus

Я думаю, что это все еще приемлемый метод. Даже если вы используете CSS для отображения кругов, вам все равно нужно обрабатывать его на разных размерах экрана. Но да, вы правы, опасаясь изображения. если можно, перейдите к решению CSS. –

Вы можете использовать :after, меняя стили по своему вкусу.

.border Должно быть установлено нестатически.

.wrapper { 
 
    width: 1030px; 
 
    background-color: #534741; 
 
    height: 500px; 
 
} 
 
.right { 
 
    color: #fff; 
 
    width: 90%; 
 
    text-align: right; 
 
    padding: 10px 10px 0 0; 
 
    display: block; 
 
} 
 
.border { 
 
    border-bottom: 2px solid #000; 
 
    width: 50%; 
 
    float: right; 
 
    margin: 10px 140px 0 10px; 
 
    position: relative; 
 
} 
 
.border:after { 
 
    /* Position and border */ 
 
    display: block; 
 
    content: ''; 
 
    border: 2px solid #000; 
 
    position: absolute; 
 
    width: 32px; 
 
    right: -34px; /*** -(Width+Border) ***/ 
 
    height: 32px; 
 
    bottom: -18px; /*** -((Height/2)+Border) ***/ 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 
.text { 
 
    float: right; 
 
    width: 300px; 
 
    margin-right: 90px; 
 
}

<div class="wrapper"> 
 
    <div class="right"> 
 
    <h2>Text</h2> 
 
    </div> 
 
    <div class="right"> 
 
    <h3>2014</h3> 
 
    </div> 
 
    <div class="right "></div> 
 
    <div class="right border"></div> 
 
    <div class="right text"> 
 
    <p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p> 
 
    </div> 
 
</div>

JSFiddle

источник

2014-11-07 13:44:27 George

Если вы добавляете граничный радиус, возможно, использование 50% меньше подвержено ошибкам (меньше переписывать, если вы когда-либо изменяете размер круга), в противном случае это хорошее решение. – somethinghere

@somethinghere Конечно, это так. Хороший улов. – George

Это выглядит хорошо. Когда я перехожу на левую сторону, я не могу заставить его выглядеть так же, как на этом изображении, потому что JAN и 2011 ушли вниз, почему? Спасибо. – Morpheus

Ниже код должен работать:

 
 
.box-with-circle { 
 
    width: 90%; 
 
    position: relative; 
 
} 
 
.box-with-circle .circle { 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin -20px 0 0 -20px; 
 
    border: 1px solid #000; 
 
    background-color: #fff; 
 
    z-index: 1; 
 
    border-radius: 50%; 
 
} 
 
.box-with-circle hr { 
 
    position: relative; 
 
    top: 20px; 
 
}

<div class="box-with-circle"> 
 
    <div class="circle"></div> 
 
    <hr /> 
 
</div>

источник

2014-11-07 13:41:02 somethinghere

Попробуйте сделать это с позиционированием и радиусом мотылька. Или просто используйте изображения.

.content-wrapper { 
 
    position: relative; 
 
    width: 400px; 
 
    margin-bottom: 30px; 
 
} 
 
.line .circle { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 25px; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top: -25px; 
 
} 
 
.line { 
 
    position: relative; 
 
    border-bottom: 1px solid black; 
 
} 
 
.odd .line { 
 
    margin-right: 50px; 
 
} 
 
.even .line { 
 
    margin-left: 50px; 
 
} 
 
.odd .circle { 
 
    right: -50px; 
 
} 
 
.even .circle { 
 
    left: -50px; 
 
} 
 
.content, 
 
.header { 
 
    padding: 0 60px; 
 
} 
 
.odd .content, 
 
.odd .header { 
 
    text-align: right; 
 
} 
 
.even .content, 
 
.even .header { 
 
    text-align: left; 
 
}

<div class="content-wrapper odd"> 
 
    <div class="header">Some title</div> 
 
    <div class="line"> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="content">Loerm ipsum dolerom</div> 
 
</div> 
 
<div class="content-wrapper even"> 
 
    <div class="header">Some title</div> 
 
    <div class="line"> 
 
    <div class="circle"></div> 
 
    </div> 
 
    <div class="content">Loerm ipsum dolerom</div> 
 
</div>

источник

2014-11-07 13:49:57 Justinas

Позиционирование круга и линии для временной шкалы

ответ

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