CODEWITHSUNDEEP
css
andrelange91
andrelange91

Reputation: 1148

Vertical line with dots in ends and between

I have been searching for a solution for this both here, and on google with no success.

I want to create a Vertical line which has dots in the ends and a few along the line.

img for example:

horizontal line with dots

how can I achieve this with css ? I can do a dotted line with spacing, but I have no idea how to create the line also, and if that is even possible ?

Upvotes: 19

Views: 19878

Answers (3)

CodeRonin
CodeRonin

Reputation: 2109

I know this is an old question but I would like to provide another possible solution

.element {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.circle {
 border-radius: 50%;
 width: 15px;
 height: 15px;
}

.circle-black {
 background-color: black;
}

.vline {
 border-left: 3px solid;
 height: 50px;
}
<div class="element">
 <div class="vline"></div>
 <div class="circle circle-black"></div>
</div>

The main idea is that a dot is simply a rounded square (to create bigger or smaller dots simply adjust width and height in the cicrle class, but preserve its squareness) and the conjunction element is a vertical line. With this format you can easily add or remove lines and apply colors to both lines (add a border-color rule) and dots.

Upvotes: 2

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

Here's a quick snippet that might help you with your problem:

.bar {
  list-style: none;
}
.bar >li {
  position: relative;
}
.bar>li:before {
  content: '\25CF';
  margin-right: 10px;
  font-size: 20px;
}
.bar>li:after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  border-left: 2px solid black;
  margin-left: 5px;
  height: 100%;
}
.bar >li:first-of-type:after {
  top: 50%;
}
.bar >li:last-of-type:after {
  top: -50%;
}
<ul class="bar">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
  <li>element 5</li>
</ul>

The idea is that you use a list and each element's bullet is replaced with a :before symbol of a Unicode black circle, while each :after selector for the elements contains the element's share of the vertical line. The first and last list elements have an extra rule to truncate their border-line, so that it does not go past the black circle.

Tweak it a bit to get the exact effect you want!

Upvotes: 27

Amadan
Amadan

Reputation: 198324

<style>
  svg {
    background-color: black;
  }
  .dotted-line {
    fill: none;
    stroke: orange;
    stroke-width: 2;
    marker: url(#circle-marker);
  }
  #circle-marker circle {
    fill: orange;
    stroke; orange;
  }
</style>
<svg height="40" width="190">
  <polyline class="dotted-line" points="20,20 70,20 120,20 170,20"/>
  <marker id="circle-marker" markerWidth="8" markerHeight="8" refX="5" refY="5">
    <circle class="foreground" cx="5" cy="5" r="3" />
  </marker>
</svg>

(I took "horisontal" at face value; it is trivial to make it vertical.)

Look up marker SVG element, and marker-start, marker-end, marker-mid SVG attributes. marker attribute here combines the three attributes (for brevity, since they're all identical).

Upvotes: 5

Related Questions