How to Draw Line in Html Vertical
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 me t hod is to take a horizontal line and use the transform property to rotate it. For a vertical line you would rotate it 90 degrees.
<html> <hr><style>
</html>
hr {
transform: rotate(90deg);
}
</style>
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.
<style>
hr{
transform: rotate(90deg);
width: 100px;
}
</style> The fun thing though, is that you can turn it into a diagonal just by changing the degree of rotation!
<style>
hr{
transform: rotate(45deg);
width: 100px;
}
</style> 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.
<style>
transform: rotate(90deg) translateY(101px) translateX(5px);
width: 100px;
</style> 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
<html> <div class="verticalLine> <style>
.verticalLine {
width: 1px;
height: 100px;
background: red);
</style> </html>
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.
<html> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit itaque porro aut, laborum nobis blanditiis et nihil adipisci quod aliquam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim pariatur quo deserunt deleniti doloribus eos molestiae repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur doloribus odio fuga aperiam harum debitis error iusto, vero modi velit!</p> <style>
p {
width: 200px;
float: left;
margin:20px;
border-right: 1px solid red;
}
</style> </htm>
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.
<html> <div class="textBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit itaque porro aut, laborum nobis blanditiis et nihil adipisci quod aliquam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim pariatur quo deserunt deleniti doloribus eos molestiae repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur doloribus odio fuga aperiam harum debitis error iusto, vero modi velit!</p>
</div> <style>
p {
width: 200px;
float: left;
margin:20px;
border-right: 1px solid red;
}
p:last-child {
border-right:0;
}
</style> </htm>
Now your paragraphs will look like this:
How to Draw Line in Html Vertical
Source: https://medium.com/@dear_trudence/how-to-draw-vertical-and-diagonal-lines-with-html-and-css-9e8d7d9c59b2
0 Response to "How to Draw Line in Html Vertical"
Post a Comment