<hr width="60%" color="1155cc" size="8" >
So it looks like this
http://i.imgur.com/rv8TMLs.png
Is it possible to do that with an hr line?
Maybe it is possible 
Meanwhile try this until a more suitable solution is provided.
<div style="background-color:#aaa;">
<svg viewBox="0 0 2000 10" xml:space="preserve">
<line x1="20%" x2="80%" y1="20%" y2="15%" stroke="#1155cc" stroke-width="8" />
</svg>
</div>
Edit: 001
x1=“5%” x2=“95%” are measured from the left.
Beware:
y1=“20%” y2=“15%” are measured from the top
Edit: 002
Optimised and amended colours to suit original request,
3 Likes
I got up to this. How would I move the line a little more up, a little bit more lower, maybe more to the left, more to the right. How would I do this?
<body style="background-color:black;">
<div style='width:600px;padding:20px; background-color: #000000; font-family: ; font-size: 30px;font-style: normal; color: white'>
<b> How would I change the axis of a hr line?</b>
</div>
<svg width="600" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="1000" y1="10"
x2="100" y2="20"
stroke="#1155cc"
stroke-width="9"/>
</svg>
Basically, how would I re-position the blue line?
From this: https://jsfiddle.net/hh81r5La/3/
http://i.imgur.com/NIEztnP.png
To this.
http://i.imgur.com/oWrz4yi.png
Is there such thing as a line-height setting on an svg?
Now we’re just talking about adding a line-height to the blue line.
<body style="background-color:black;">
<div style='width:600px;padding:20px; background-color: #000000; font-family: ; font-size: 30px;font-style: normal; color: white'>
<b> How would I change the axis of a hr line?</b>
</div>
<svg width="600" height="120">
<line x1="1000" y1="10"
x2="0" y2="20"
stroke="#1155cc"
stroke-width="9"/>
</svg>
- The SVG scales up to the complete size of the containing DIV.
- The SVG viewport dimensions do not affect the DIV size.
- If using HTML 5
xmlns="http://www.w3.org/2000/svg"is not required. - The line co-ordinates are relative to the viewport and can be PS, EM, etc.
<div style="background-color:#ddd;">
<svg viewBox="0 0 2000 50" xml:space="preserve">
<line x1="10%" x2="80%" y1="20%" y2="15%" stroke="red" stroke-width="8" />
<line x1="20%" x2="80%" y1="50%" y2="1%" stroke="blue" stroke-width="8" />
<line x1="30%" x2="80%" y1="70%" y2="0%" stroke="green" stroke-width="8" />
</svg>
</div>
why not use a CSS transform on the HR?
hr.tilted{
-ms-transform: rotate(-.9deg); /* IE 9 */
-webkit-transform: rotate(-.9deg); /* Chrome, Safari, Opera */
transform: rotate(-.9deg);
}
BTW, I might recomend that if you are using the HR as a simple underline to some headline, that you employ a pseudo element (or at least a SPAN instead. HR hold/held semantic value, indicating a break between topics.
Hope that helps.
5 Likes
How come the line doesn’t stay the same stroke width?
<svg width="1416" height="120">
<line x1="1416" y1="0"
x2="0" y2="8"
stroke="#1155cc"
stroke-width="9"/>
</svg>
I do not know why the width changes.
Why not use the @dresden_phoenix’s or my example?
They both solve your original problem.
Here are four possibilities based on @dresden_phoenix’s code, choose one depending on your need.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403
asasass
-->
<style type="text/css">
hr,.hr {
display:block;
border:0;
background-color:#8be;
height:12px;
width:80%;
-ms-transform: rotate(-.9deg); /* IE 9 */
-webkit-transform: rotate(-.9deg); /* Chrome, Safari, Opera */
transform:rotate(-.9deg);
margin:24px auto;
}
.hr2 {
display:table;
border-bottom:12px solid #8be;
height:0;
-ms-transform: rotate(-.9deg); /* IE 9 */
-webkit-transform: rotate(-.9deg); /* Chrome, Safari, Opera */
transform:rotate(-.9deg);
padding-bottom:.0625em;
margin:24px auto;
}
.hr3 {
display:table;
margin:0 auto;
}
.hr3 span {
display:block;
width:94%;
height:12px;
background-color:#8be;
-ms-transform: rotate(-.9deg); /* IE 9 */
-webkit-transform: rotate(-.9deg); /* Chrome, Safari, Opera */
transform:rotate(-.9deg);
margin:.25em auto;
}
</style>
</head>
<body>
<div class="hr"></div>
<hr> <!-- not recommended -->
<h1 class="hr2">This headline and underline are tilted.</h1>
<h1 class="hr3">This headline is level. The underline is tilted.<span></span></h1>
</body>
</html>
4 Likes
What if I don’t want the text to be a heading, not bold text.?
Then don’t use the <h#> tags for it.
Use <p> or whatever is semantically appropriate for the text in question.
Tip: Don’t choose html tags based on appearance, but on their meaning. Appearance can always be changed with css.
3 Likes
got it. thanks.
How would I make the line shorter on the right side without changing it on the left.
<style type="text/css">
}
.hr3 {
}
.hr3 span {
display:block;
width:2000;
height:12px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:15px auto;
}
</style>
<p class="hr3" style='margin: 0; width:1500px;height:500px; padding:52px;background-color: #000000;font-style: normal; font-family:georgia;line-height:1; font-size: 168px; color: green'>Testing The Text<span></span></p>
Something like this, maybe:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403
asasass
-->
<style type="text/css">
.hr3 {
background-color:#000;
background-image:
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
background-position:50% 0;
}
.hr3 span {
display:block;
width:90%; /* sets length of underline. assign NO width and it will match the width of the text. */
height:12px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:15px 0; /* changed from "15px auto" so the underline will left align. */
}
</style>
</head>
<body>
<!-- Fixed widths and heights are not usually a good idea. Changed the paragraph to display:table to keep the underline close to the width of the text. -->
<p class="hr3" style='display:table; margin:0; height:500px; padding:52px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:168px; color:green'>Testing The Text<span></span></p>
</body>
</html>
Don’t panic. I threw in the background grid just for fun. It’s harmless. After you demo it in your browser, you can delete it.
Note that <hr> is also a heading - just one that doesn’t have any actual text.
The line lines up with the text, is there a way to extend it over more to the left?
Can you add more line in-front of the text, is that possible?
Of course. There are several ways to do that. The best method usually depends on how your page is constructed. The surrounding context, as we say.
I took the styles out of the paragraph so I could leave comments beside the margins.
There are comments within the CSS that and one at the top of the page. Let me know if you want more information.
When coding, I assume (right or wrong) that eventually you will want this or other pages to be fluid and responsive rather than limited by fixed widths and heights. That is why I use percents, ems, and very few fixed dimensions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-change-the-axis-of-an-hr-line/236403
asasass
Add padding beside the paragraph, then pull ends of underline into that padded space to extend it wider than the text.
OR use a combination of positive and negative horizontal margin to move the underline to the left (enable the second span margin example).
-->
<style type="text/css">
body {
background-color:#000; /* #269 */
background-image:
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
background-position:50% 0;
}
.hr3 {
display:table;
/* background-color:#000; /* Temporarily commented out to show the grid. */
color:green;
font-style:normal;
font-size:9em;
line-height:1;
font-family:georgia,serif;
text-align:center;
padding:50px 7%; /* Notice horizontal padding added to box. */
margin:0 auto;
outline:1px dashed #cc0; /* TEST Outline. To Be Deleted. */
}
.hr3 span {
display:block;
height:12px;
background-color:#15c;
transform:rotate(-1deg);
margin:16px -.25em; /* negative horizontal margin pulls underline into .hr3's horizontal padding; thus, wider than text. */
/* margin:16px .25em 16px -.25em; /* negative and positive horizontal margin move the underline to the left. */
}
</style>
</head>
<body>
<p class="hr3">Testing Text<span></span></p>
</body>
</html>
1 Like
How would I add a green line below the blue line here? The one that’s in the middle.
<style type="text/css">
.hr3 {
background-color:#000;
background-image:
}
.hr3 span {
display:block;
width:750;
height:8px;
background-color:#1155cc;
transform:rotate(-.9deg);
margin:9px 0; /* changed from "15px auto" so the underline will left align. */
}
</style>
</head>
<body>
<p class="hr3" style='display:table; margin:0; border:5px solid #38761d;width:754; height:242px; padding:32px; background-color:#000; font-style:normal; font-family:georgia;line-height:1; font-size:89px; color:#38761d'>----------------------<span></span></p>
I’m not sure what you want. Do you want parallel green and blue lines? or do you want the green line to the horizontal like the text (and like your image)?
If horizontal, how wide? You can assign a green border to the bottom of the paragraph. It will be as wide as the container, of course, but it will fit your description of “below the blue line”.
Parallel lines would be quite easy. Do away with the background color on the span, then assign a border-top and border-bottom to the span using whatever colors you wish… green and blue?
PS: in your code example,
.hr3 span {
display:block;
width:750; /* invalid. Needs a unit of measure. px? */
When written within html attributes, px is assumed. In CSS, including inline CSS styles, a unit of measure is required.