-1

I want to make a speech bubble like the image below with an outline/border. The arrow is a square with two borders, rotated by 45 degress. It does work, but the borders do not connect perfectly, as you can see when you zoom in.

Is this even cleanly solvable with CSS? If not, how would you solve it?

enter image description here

Source: https://levelup.gitconnected.com/how-to-create-simple-triangle-borders-with-css-665d26372825

root66
  • 477
  • 5
  • 17
  • 1
    just change the top value to `-12.5px`. it should fix it. – Sumit Surana Aug 12 '22 at 09:28
  • related: https://stackoverflow.com/q/47956092/8620333 – Temani Afif Aug 12 '22 at 10:02
  • 1
    Since it's two seperate items alignen them on all zoom levels will be tricky I imagine. Maybe you can use an SVG for the border. – cloned Aug 12 '22 at 11:25
  • @SumitSurana : Looks better now, but there remains a kind of antialiasing artifact at the "splice". Look here: https://iili.io/UthHOJ.md.jpg – root66 Aug 12 '22 at 13:38
  • Update: "background-clip: padding-box;" removes the color from the splice. – root66 Aug 12 '22 at 13:51
  • Update 2: Unfortunately, the value depends on the browser and the browser zoom. In Chrome and Firefox the element even jumps when I scroll. – root66 Aug 12 '22 at 14:12

1 Answers1

1

I think you can probably just shift it outwards by one pixel to fix this, i.e. change top: -12px to top: -13px

Alex
  • 848
  • 6
  • 7