我想製作一個路標形式的按鈕（有尖端的矩形）。
_______ | \ |_______/
我想動態地將文字寫入標誌中，每個文字都有不同的長度。 如果我僅使用圖形作為背景圖形嘗試此操作，則箭頭會相應地縮放並壓縮/拉伸。 因此，將文字放入普通 div 中並使用 CSS :after 將箭頭附加為 SVG 的方法。 箭頭應該完全填充，即我不必處理框架問題。 （為了增加可見性，我將 SVG 保留為黑色） 我的第一個問題是箭頭始終位於區塊中而不是後面。我用position:absolute;解決了這個問題。但進一步的微調失敗了，因為我無法根據左：和右：塊的末尾進行定位
問題：
我該如何定位才能使三角形始終準確地連接到盒子的末端。 （中間沒有白色）
如何依照盒子的大小（高度）縮放 SVG。 （以便邊緣適合）（也許還考慮到的填充）
.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>
如 A Haworth 所提到的，剪輯路徑可能更簡單。為此，請在按鈕右側添加一些
padding，以便始終為箭頭所在的位置留出空間，然後將clip-path整個元素新增至.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%); }