Create scalable signposts using HTML, CSS and SVG

Question

I want to make a button in the form of a road sign (a rectangle with a tip).

_______
|       \
|_______/

I want to dynamically write text into the logo, each text having a different length. If I try this using just the graphic as a background graphic, the arrows scale and compress/stretch accordingly. So put the text in a normal div and use CSS :after to append the arrow as SVG. The arrow should be completely filled, i.e. I don't have to deal with framing issues. (I left the SVG black for increased visibility) My first problem is that the arrow is always in the block and not behind it. I solved this problem using position:absolute;. But further fine-tuning failed because I couldn't position based on the end of the left: and right: blocks

question:

• How do I position it so that the triangle always connects exactly to the end of the box. (No white in the middle)

• How to scale SVG based on the size (height) of the box. (so that the edges fit) (maybe also taking into account the padding)

Or am I completely on the wrong track with the after approach, and should I append the arrow (as an SVG file) directly in the HTML after the text (the text is enclosed with ) and wrap everything with ? But actually I want to avoid this and inserting via CSS would be better. But if this is a more useful way, I'm ok with it.

.querverweis{
    background-color: #005000;
    color: #ffffff;
    display: inline-block;
     margin: 10px  
     margin-left: -10px 
}

.querverweis:after {
  content:  url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='40' viewBox='0 0 66 100' xml:space='preserve'%3E%3Cpath d='M0 0 L66 50 L0 100 L0 0' style='fill=rgb(0,0,0)'/%3E%3C/svg%3E%0A");   
  position: absolute; 
}

<div class="querverweis">Test</div>

Answer 1

As A Haworth mentioned, the clipping path could be simpler. To do this, add some padding to the right of the button to always leave space for where the arrow should be, then add clip-path to the entire element

.querverweis {
  position: relative;
  background-color: #005000;
  color: #ffffff;
  display: inline-block;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  clip-path: polygon(0% 0%, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0% 100%);
}

Test




Test with more text




Test with multi-line text