How to draw vertical and diagonal lines with HTML and CSS
As someone just starting out with HTML and CSS there are a few things (to say the least) that can immediately perplex. For me it was vertical lines. Wanna make a horizontal line? Cool. Throw in an <hr> tag and you're good to go. Wanna make a vertical line? Logic would dictate you throw in a <vr> tag and you're good to go. Wait, no?
Now we have to get a little creative. I'll share three methods for making vertical lines (and diagonal too just for fun ☺).
Rotating a Horizontal line
The first method is to take a horizontal line and use the transform property to rotate it. For a vertical line you would rotate it 90 degrees.
Slightly confusingly, in order to change the height of the line, you'll need to change the width property because after all, this is just a horizontal line turned on it’s side.
The fun thing though, is that you can turn it into a diagonal just by changing the degree of rotation!
To move the line around the page you can add the parameters translateX and translateY to the transform property. This will move the line along the X and Y axis respectively.
A <div> with a width of 1px
The next method is to create a <div> that has the width of 1px (or more depending on how thick you’d like the line). For this method you'll have to specify a class on the <div> so as not to confuse the styling with other <div>s on your page
This may seem a little less intuitive that just rotating a horizontal line, but the benefit is that in order to change the height, you change the height property and don’t have to bend your mind every time you want to modify it a little. Another benefit is that you can make the line as thick as you would like by adjusting the width property.
But don't forget to add a background colour or border-left or border-right colour or you'll be wondering why you can't see the line ;).
The transform property works the same way as in the previous method to make diagonal lines as well.
Border-Left/Right on an existing <div>
One way to make your life a little easier is to use what’s already there. For instance, if you like to put vertical lines between text and you already have some paragraphs floating next to each other, you could just put a border-right property and voila! a vertical line separating the text. This saves you making extra <div>s for each line.
The above code will result in the following vertical lines.
You might be thinking “but I only wanted lines between the text, this method isn't going to work for me”. But wait, there’s more!
By simply adding a <div> around the paragraphs and adding a last:child pseudo selector with no border you’re problems are solved.
How to Style a Horizontal Line
A horizontal rule is commonly used as content or section divider. As a horizontal rule the <hr> element is used. Originally the <hr> element was styled using attributes. Nowadays, in HTML5, the <hr> element tells the browser that there is a paragraph-level thematic break. Let’s see how to style the <hr> element with CSS below.
Change the size and position of a horizontal rule
The <hr> element is styled with CSS rules instead of attributes. Change the width of the horizontal line by setting the width property and then center it using the margin property.
Example of changing the width and position of a horizontal rule:
Result
Center Horizontal Line
If you want to change the thickness, or height of your horizontal line, add the height property to your <hr> style. In this case, you can also set the background-color property for the thick horizontal line.
Example of changing the height and background color of the horizontal rule:
Set the border property to «none» to remove the border of your thick horizontal line.
Example of adding a horizontal rule without a border:
You can change the color of the horizontal line by setting the border-top property and defining the color. Follow the example to see an illustration of it.
Example of adding a horizontal line with the border-top property:
Additional style for horizontal lines
Go further with horizontal lines by giving different styles to your <hr> element’s border. Check the example code to see what stunning horizontal lines are presented.
Example of adding different styles to horizontal lines:
Use a background image as a horizontal rule
If you want to set an ornament or image as a horizontal rule for your website, you can add a background image to your horizontal rule with the help of the CSS background property. Also, set the height equal to the height of your image (or how much part you want from the image), and border: none, so as your image will look like as a horizontal line.
<hr>: The Thematic Break (Horizontal Rule) element
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
| Content categories | Flow content. |
|---|---|
| Permitted content | None, it is an empty element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | Any element that accepts flow content. |
| Implicit ARIA role | separator (en-US) |
| Permitted ARIA roles | presentation (en-US) or none (en-US) |
| DOM interface | HTMLHRElement (en-US) |
Attributes
This element’s attributes include the global attributes.
Задаёт правило выравнивания.По умолчанию значение выставлено как left
horizontal line and right way to code it in html, css
I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
3) use it like a after pseudoclass
Which way is the most practical?
11 Answers 11
Here is how html5boilerplate does it:
I’d go for semantic markup, use an <hr/> .
Unless it’s just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
and use it like
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the <hr> tag represents a horizontal rule.
So after definition, I would prefer <hr>
I wanted a long dash like line, so I used this.
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color. This can be done by setting the style directly or by defining a class, for example, like:
it is depends on requirement , but many developers suggestions is to make your code as simple as possible . so, go with simple «hr» tag and CSS code for that.