Up triangle, adjusting the y position in CSS - html

Question

Hey I have a triangle in CSS created like so:
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
I would like to change the y position of the triangle and move it up so the top of the triangle aligns with the top of the text. How would I go about doing this?

Answer 1

Try This:
.triangleup {
vertical-align: top;<----------Added
//More code.........
}
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
vertical-align: top;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>

Answer 2

There are 2 ways you could do this, i.e. align triangle at top so that it level-up with remaining texts,
1st - By changing the position of .triangleup to position:relative and using top as negative value,
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
position:relative; /*Add this*/
top:-22px; /*Add this*/
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
2nd - By changing the position of .triangleup to position:absolute and top:0, here you even need to change position of h1 to relative.
position:absolute - The element is removed from the normal document
flow; no space is created for the element in the page layout. Instead,
it is positioned relative to its closest positioned ancestor if any;
otherwise, it is placed relative to the initial containing block.
h1{
position:relative;
}
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
position:absolute;
top:0;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>

Answer 3

You could try putting some margin on the bottom of the triangle
.triangleup {
margin-bottom: 10px;
}

Answer 4

margin-left:50px;
margin-top:50px;
This is used to set the position of the top left corner point of the triangle.

Answer 5

margin-bottom:10px;
This code in css will fix the issue

Answer 6

.triangleup {
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
top:0px;
}
h1{
background-color:blue;
position:relative;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
Make your h1 element position:relative and traingleup class position:absolute.
Now it works.
Hope it help.

Answer 7

Other answers here give you some possibilities that will work with the specific example you've given, but may require adjusting the numbers a bit depending on your real-life font size and font family.
A more abstract solution that will give you roughly the correct alignment no matter the font is to use the CSS property meant specifically for this purpose: vertical-align: text-top.
Simply setting that property will automatically align the bottom of your triangle to the top of your text.
If you want to align the top of the triangle, you can then do what others have suggested and add relative positioning to the vertical alignment. Since your triangle is 10 pixels tall, you can use top: 10px (in conjunction with position: relative) to push the triangle down so its top will then align with the top of the text.
Final styles would look like this:
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
vertical-align: text-top;
position: relative;
top: 10px;
}
Whether that gets the triangle to sit close enough to where you want it to or not will be the deciding factor on if you go this route or one of the routes others have presented. This method is, I think, more flexible at the expense of being slightly less precise.

Answer 8

You can align it with applying position. So the code will be:
.triangleup {
border-color: transparent transparent #58be23;
border-style: solid;
border-width: 0 7.5px 10px;
display: inline-block;
height: 0;
position: relative;
top: -3px;
width: 0;
}
https://jsfiddle.net/rijokpaul/hjx7q4kj/2/