skalable signpost with html, css and SVG-CodePudding

I would like to make a button in the form of a signpost (rectangle with tip).

 _______
|       \
|_______/

I want to dynamically write text into the sign, each with different lengths. If I try this only with a graphic as background graphic, the arrowhead is scaled with and compressed / stretched accordingly. Therefore the approach to put the text in a normal div and attach the arrowhead as SVG using CSS :after. The arrow should be fully filled, i.e. I don't have to deal with frame problems. (To increase the visibility I left the SVG black) My first problem is that the arrowhead is always in the block instead of behind it. this I solved with position:absolute;. But further fine tuning fails, because I can't position based on the end of the block with left: and right:
Questions:

How do I have to position so that the triangle always connects exactly to the end of the box. (no white betwwen)
How can I scale the SVG with the size (height) of the box. (So that the edges fits) (maybe also with consideration of the paddings of the )

Or am I completely on the wrong track with the approach via :after and should rather append the arrow (as SVG file) direkt in the HTML behind the text (text ay enclose with ) and enclose all with the ? But actually I wanted to avoid that, the insert via CSS would be nicer. But if that is the more useful way, I can live with it.

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

.querverweis:after {
  content:  url("data:image/svg xml, 
");   
  position: absolute; 
}

<div >Test</div>

CodePudding user response：

As A Haworth mentions, clip-path might be simpler. To do this, add some padding to the right of the button to always have space where the arrow will live and then clip-path the whole 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%);
}

<div >Test</div>
<br>
<br>
<div >Test with more text</div>
<br>
<br>
<div  style="max-width:6rem">Test with multi-line text</div>