Need help adjusting css arrow

HTML-CSS
1

You can see there’s a gap at the point where the sides need to be flush together at the tip of the arrow. Can someone tell me how to do that? I’ve played with the numbers of right and bottom on the :before and :after selectors so many times. Sometimes I’ll get them to fit together properly only to see that the rectangle is peeking out of the sides.

https://codepen.io/lepros/pen/ExXXgRL

#square {
  background-color: blue;
  width: 100px;
  height: 200px;
  margin: auto;
  margin-top: 50px;
  position: relative;
}

#square:after {
  content: "";
  display: inline-block;
  border-radius: 4px;
  width: 150px;
  height: 70px;
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  right: 10px;
  bottom: 0px;
}

#square:before {
  content: "";
  display: inline-block;
  border-radius: 4px;
  width: 150px;
  height: 70px;
  background-color: white;
  transform: rotate(-45deg);
  position: absolute;
  right: -60px;
  bottom: 0px
}
2

Try moving the pseudo-elements down a bit and then change the rotation deg to make them fit.

Another option that is often used for arrows is the border trick (basically creating a triangle for the arrowhead). I might also suggest making the arrow a bit more subtle. If you search for CSS scroll down arrow you will find a bunch of examples.

1 Like
3

Going negative on the bottom values and going from (-)45 degrees to (-)40 degrees worked. Thank you @lasjorg

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.