CODEWITHSUNDEEP
css
wayfarer
wayfarer

Reputation: 790

CSS to create arrowhead aligned with arrow body

I need to draw a lot of precisely positioned horizontal arrows that point either left, right, or both. I don't want to use HTML canvas. it will all be done dynamically with JQuery, but the css parameters will be the roughly the same as below, including arrowhead size and arrow thickness.

This code works pretty well...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style >
        .ArrowHead {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 12px solid black;
            top:46px;left:52px;
        }
          .Arrow {
            border-top:solid 1px black;
            position: absolute;
            top:50px;left:50px;
            width:100px;height:1px
        }
    </style>
</head>
<body>
    <div id="Arrow" class="Arrow"></div>
    <div id="ArrowHead" class="ArrowHead"></div>
</body>
</html>

...but the tip of the arrowhead is slightly above the body of the arrow, and it just looks aligned properly on the right of the arrowhead because the bottom of the arrowhead is larger than the top (easier to see at 400%). Nice illusion, however, I was hoping to find out if there was some way that the arrowhead could be vertically symmetric and still be lined up exactly horizontally with the arrow body.

Upvotes: 0

Views: 2156

Answers (1)

ralph.m
ralph.m

Reputation: 14345

You won't be able to center the arrow vertically while the line is 1px in height, as you can't measure in half pixels. If you are willing to increase the line's width to two pixels, it's easy, though. It's also better to position the arrow heads relative to the line rather than to the viewport (using relative/absolute positioning). E.g.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
          .arrow {
            background: black;
            width:100px;
            height:2px;
            position: relative;
        }

        .arrow::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 12px solid black;
            top:-4px;
            left:-3px;
        }

        .arrow::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 12px solid black;
            top:-4px;
            right:-3px;
        }
    </style>
</head>
<body>
    <div class="arrow"></div>
</body>
</html>

Upvotes: 2

Related Questions