Как нарисовать вертикальную, пунктирную линию вниз по центру страницы с помощью CSS?

Я хотел бы нарисовать пунктирную линию, вертикально вниз по центру моей страницы, "скрываясь" под любыми полями содержимого на этом пути... Есть ли способ сделать это в CSS, или мне придется использовать повторяющееся изображение?

Ответ 1

Это дает вам точки: http://jsfiddle.net/NBMRp/

body:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #444; /*change these values to suit your liking*/
}

Они просто не такие красивые.

Ответ 2

Для пунктирной линии я использовал бы:

.vertical_dotted_line
{
    border-left: 1px dotted black;
    height: 100px;
} 

<div class="vertical_dotted_line"></div>

И чтобы сделать его under другими элементами, вам нужно сыграть с z-index вашей пунктирной линии div и других div (они должны иметь увеличенное значение z-index)

Ответ 3

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

С помощью CSS вы можете сделать это, сделав границу влево или вправо.

Например

<div class="one"></div>
<div class="tow"></div>

CSS

.one{
  width: 50%;
  border-right: 1px dotted red;
}

и с изображением

body{
  background-image: url("dotted.png") repeat-y center top;
}

Ответ 4

Создайте изображение PNG шириной 1 пиксель в Photoshop с нужным шаблоном, затем установите его как фон (или одно из нескольких фоновых изображений в CSS3) элемента <body>, например:

body {
    background-image: url("dottedLine.png") repeat-y center top;
}

Возможно, вы можете сделать это без файлов изображений либо с помощью URI data:, либо с повторением повторяющегося градиента CSS3 высотой 2 пикселя.

Ответ 5

Если вы хотите, чтобы линии должны были выходить из высоты div -

.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;

}