Is it possible to draw vertical lines which have different lengths with css?

how to draw a vertical line in html css
css vertical line separator
html vertical line divider
vertical line after text css
css vertical line between divs
vertical line bootstrap
horizontal line css
horizontal line after text css

I can draw vertical lines in background using this answer. And this answer draws same length of vertical lines.

But I'd like to draw the following lines. (5th line is a bit longer than others.)

Currently, I drew these lines with 1px width divs. But after checking the above answer, I am wondering if I can draw only via css. But still not sure if it's possible.

Looking forward to any advices. Thanks in advance.

Here is an easier idea using repeating-linear-gradient

.line {
  height: 50px;
  background:
   repeating-linear-gradient(to right, red   0 4px, transparent 4px 80px),
   repeating-linear-gradient(to right, green 0 4px, transparent 4px 20px) left/100% 70% no-repeat;

}
<div class="line"></div>

How To Create a Vertical Line, And this answer draws same length of vertical lines. But after checking the above answer, I am wondering if I can draw only via css. But still� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

You can make background with same length, then using before or after to create a vertical line with height longer and put it in the middle of the background

div {
  width: 450px;
  height: 100px;
  position: relative;
  background-color: black;
  background-size: 10% 50%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, green 4px, transparent 1px, transparent);
  background-position: -2px center;
}
div:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 70px;
  background-color: green;
}
<div></div>

How to draw a vertical line in HTML5 and CSS, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� To draw four 0.4em lines that intersect one other in the center, know that half of the line should be half the div at 10em. So then, we subtract and add half of 0.4 (0.4 / 2 = 0.2) on each side. In other words, the left of the green should be 9.8em, and the right should be 10.2em.

.main_div
{
  position:absolute;
  width:90%;
  border:1px solid;
  height:50%;
  display:flex;
  justify-content:space-between;
}
.div_one
{
  position:relative;
  width:1%;
  border:1px solid;
  height:50%;
  background-color:black;
}
.div_five
{
  position:relative;
  width:1%;
  border:1px solid;
  height:60%;
  background-color:black;
}
<div class="main_div">
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_five"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
</div>

How To Make Vertical Lines in Squarespace — Minimist Website , There's no need to use any extra HTML elements here, all you need is a CSS How do you make a vertical line using HTML? rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child As far as I know, you may not be able to achieve this 'directly' using HTML or� Design is really made up of white / gray / black areas. The thing that bothers me is the current fashion to make text on a webpage ‘shades’ of dark-gray rather than BLACK. Personally readability is best with yellow text on a blue background, but since it is now possible to have millions of colors, that’s my ‘old fuddy duddy’ side

How to Create a Vertical Line in HTML, Step 2: Use CSS to Style the div Into a Vertical Line defines the length of the line. position: absolute; left: 50%; //move the line to the middle in the page's advanced section, you need to write the code a little bit different. I did mine this way to give me some room to work and make it possible to see the different lines to come clearly. Draw two more vertical lines at 90 degrees down from the outer edges of the upper circle, or tangent to the upper circle's outer edge, down to intersect the lower circle.

Css vertical line between divs, How to Create a Vertical Line in HTML. Topic: HTML / CSSPrev|Next. Answer: Use the CSS border Property the CSS border property on a <span> element in combination with the other CSS The following example will create a vertical separator line between two images. Here are some more FAQ related to this topic:. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes. Today, with HTML5, the HR tag has become semantic, which means it tells the browser, assistive reading technology and other automated system there is a paragraph-level thematic break.

how to insert vertical line in html, Inline-level Elements and Line Boxes Have Baselines, Tops and Bottoms. I tried to use the css line-height and it did increase the vertical space between the two Draw a line between two given points with just a div and CSS - tbem/jquery . but aligning two divs of different font sizes on one line is just not working. https ://i. CSS Units. CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

Comments
  • One needs to keep in mind that CSS is not a drawing program or even a graphics program. While lines can be created in limited ways, it is often best to use SVG for such things.
  • @Hai Bui, thanks. Is it possible to show vertical lines only 10 lines with same intervals even if the div width is changed?
  • You want to make it not broken when resize?
  • @AllenHaley in case above is 9 lines and 1 line height longer in middle. You want to another case 10 lines have same height and interval when width change, right?
  • You're right. 9 lines and 5th line is longer than others. So that, there will be always 10 intervals.
  • @Hai Bui, I finally got an answer by updating your answer. Thank you very much for your answer.
  • I already tried this. What I want is to do only with css. thanks.