CSS - Arrow not lining up - html

Question

I am trying tro create a pure CSS arrow with a line like this...
.arrow {
position:absolute;
left:50%;
}
.arrow_line {
width:2px;
background:darkblue;
height:60px;
margin:auto;
}
.arrow_point {
box-sizing: border-box;
height: 25px;
width: 25px;
border-style: solid;
border-color: darkblue;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
margin-top: -24px;
}
<div class="arrow">
<div class="arrow_line"></div>
<div class="arrow_point"></div>
</div>
The vertical line never quite seems to line up vertically with the arrow, I have left it slightly adrift in the example to better demonstrate that it is not centered in relation to the arrow.
Is there a better way to create a CSS arrow?

Answer 1

You can use one element and gradient then you won't have issue with centring:
.arrow {
width:80px;
height:80px;
background:
linear-gradient(blue,blue) bottom right/40px 4px,
linear-gradient(blue,blue) bottom right/4px 40px,
linear-gradient(
to top right,
transparent calc(50% - 2px),
blue calc(50% - 2px),
blue calc(50% + 2px),
transparent calc(50% + 2px));
background-repeat:no-repeat;
transform:rotate(45deg);
margin:20px;
}
<div class="arrow">
</div>
You can also easily adjust the size:
.arrow {
width:var(--s,80px);
height:var(--s,80px);
background:
linear-gradient(blue,blue) bottom right/calc(var(--s,80px)/2) calc(var(--t,2px)*2),
linear-gradient(blue,blue) bottom right/calc(var(--t,2px)*2) calc(var(--s,80px)/2),
linear-gradient(
to top right,
transparent calc(50% - var(--t,2px)),
blue calc(50% - var(--t,2px)),
blue calc(50% + var(--t,2px)),
transparent calc(50% + var(--t,2px)));
background-repeat:no-repeat;
transform:rotate(45deg);
margin:20px;
display:inline-block;
}
<div class="arrow">
</div>
<div class="arrow" style="--t:3px;--s:60px">
</div>
<div class="arrow" style="--t:1px;--s:40px">
</div>
<div class="arrow" style="--t:2px;--s:20px">
</div>
<div class="arrow" style="--t:1px;--s:20px">
</div>

Answer 2

Give your line a width which is odd. You used 2px on the line, and that resulted in the line being slightly off to one side.
I made it 3px as example.
Or vice versa, make your "point" an even number, which may make more sense, since you'll want the lines to have the same thicckness.
.arrow {
position:absolute;
left:50%;
}
.arrow_line {
width:2px;
//width: 3px;
background:darkblue;
height:60px;
margin:auto;
}
.arrow_point {
box-sizing: border-box;
height: 26px;
//height: 25px;
width: 26px;
//width: 25px;
border-style: solid;
border-color: darkblue;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
margin-top: -24px;
}
<div class="arrow">
<div class="arrow_line"></div>
<div class="arrow_point"></div>
</div>

Answer 3

Since you arrow point is 25px wide, it won't line up. Because 25 isn't an even number.
Change it to 24 like below or any other even number.
.arrow {
position:absolute;
left:50%;
}
.arrow_line {
width:2px;
background:darkblue;
height:60px;
margin:auto;
}
.arrow_point {
box-sizing: border-box;
height: 24px;
width: 24px;
border-style: solid;
border-color: darkblue;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
margin-top: -24px;
}
<div class="arrow">
<div class="arrow_line"></div>
<div class="arrow_point"></div>
</div>

Answer 4

.arrow {
position:relative;
height:30px;
width:2px;
background:red;
}
.arrow:after{
position: absolute;
content: '';
height: 10px;
width: 10px;
transform: rotate(45deg) translateX(-65%);
border: 2px solid red;
border-top: none;
border-left: none;
bottom: -20%;
left: 50%;
}
<div class="arrow">
</div>
working randomly change height width of after

Answer 5

Make it simple by using unicode arrow instead of creating it.
.arrow{
color:red;
font-size:70px;
}
<div class="arrow">↓</div>

Answer 6

You just need to make two small changes to your code:
1) delete the css for .arrow
2) for .arrow_point change margin-top to margin:-24px auto;
if you want to you can delete the < div class='arrow' >
simple solutions are best!
.arrow {
/*position:absolute;
left:50%;*/
}
.arrow_line {
width:2px;
background:darkblue;
height:60px;
margin:auto;
}
.arrow_point {
box-sizing: border-box;
height: 25px;
width: 25px;
border-style: solid;
border-color: darkblue;
border-width: 0px 2px 2px 0px;
transform: rotate(45deg);
transition: border-width 150ms ease-in-out;
/*margin-top: -24px;*/
margin:-24px auto;
}
<div class="arrow">
<div class="arrow_line"></div>
<div class="arrow_point"></div>
</div>