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)
.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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
As A Haworth mentioned, the clipping path could be simpler. To do this, add some
paddingto the right of the button to always leave space for where the arrow should be, then addclip-pathto 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%); }