How to Draw a Line in Html Css TUTORIAL
How to draw vertical and diagonal lines with HTML and CSS
Every bit someone but starting out with HTML and CSS there are a few things (to say the least) that can immediately perplex. For me information technology was vertical lines. Wanna make a horizontal line? Cool. Throw in an <hr> tag and you're practiced to get. Wanna brand a vertical line? Logic would dictate yous throw in a <vr> tag and you're good to go. Wait, no?
Now we have to become a little artistic. I'll share 3 methods for making vertical lines (and diagonal as well but for fun ☺).
Rotating a Horizontal line
The start method is to have a horizontal line and utilise the transform property to rotate it. For a vertical line yous would rotate it ninety degrees.
<html> <60 minutes><style>
</html>
hour {
transform: rotate(90deg);
}
</fashion>
Slightly confusingly, in order to change the summit of the line, you'll demand to modify the width holding considering afterward all, this is just a horizontal line turned on it'due south side.
<style>
hour{
transform: rotate(90deg);
width: 100px;
}
</style> The fun matter though, is that yous tin can turn it into a diagonal just by irresolute the degree of rotation!
<manner>
60 minutes{
transform: rotate(45deg);
width: 100px;
}
</style> To move the line around the page you lot tin can add the parameters translateX and translateY to the transform property. This will movement 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 adjacent 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 accept to specify a course on the <div> so as non to confuse the styling with other <div>southward on your page
<html> <div class="verticalLine> <style>
.verticalLine {
width: 1px;
height: 100px;
groundwork: red);
</style> </html>
This may seem a little less intuitive that only rotating a horizontal line, merely the do good is that in order to alter the height, yous modify the height belongings and don't have to bend your listen every time you desire to modify it a little. Another benefit is that you lot tin make the line equally thick equally you would like by adjusting the width property.
Just don't forget to add a background color or border-left or border-correct color or you'll be wondering why you can't see the line ;).
The transform property works the same mode as in the previous method to make diagonal lines likewise.
Border-Left/Right on an existing <div>
One way to make your life a trivial easier is to utilise what'south already at that place. For instance, if you like to put vertical lines between text and you already have some paragraphs floating side by side to each other, you could simply 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 down 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;
edge-right: 1px solid cherry-red;
}
</fashion> </htm>
The to a higher place lawmaking will result in the following vertical lines.
You might exist thinking "but I only wanted lines betwixt the text, this method isn't going to work for me". Simply wait, there's more!
By simply adding a <div> effectually the paragraphs and adding a last:child pseudo selector with no border you're problems are solved.
<html> <div form="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 mistake iusto, vero modi velit!</p>
</div> <style>
p {
width: 200px;
float: left;
margin:20px;
border-right: 1px solid red;
}
p:last-child {
edge-right:0;
}
</style> </htm>
Now your paragraphs volition look like this:
DOWNLOAD HERE
How to Draw a Line in Html Css TUTORIAL
Posted by: jasonwhosto1939.blogspot.com
Comments
Post a Comment