我想製作一個(gè)路標(biāo)形式的按鈕（有尖端的矩形）。
_______ | \ |_______/
我想動(dòng)態(tài)地將文字寫(xiě)入標(biāo)誌中，每個(gè)文字都有不同的長(zhǎng)度。 如果我僅使用圖形作為背景圖形嘗試此操作，則箭頭會(huì)相應(yīng)地縮放並壓縮/拉伸。 因此，將文字放入普通 div 中並使用 CSS :after 將箭頭附加為 SVG 的方法。 箭頭應(yīng)該完全填充，即我不必處理框架問(wèn)題。 （為了增加可見(jiàn)性，我將 SVG 保留為黑色） 我的第一個(gè)問(wèn)題是箭頭始終位於區(qū)塊中而不是後面。我用position:absolute;解決了這個(gè)問(wèn)題。但進(jìn)一步的微調(diào)失敗了，因?yàn)槲覠o(wú)法根據(jù)左：和右：塊的末尾進(jìn)行定位
問(wèn)題：
我該如何定位才能使三角形始終準(zhǔn)確地連接到盒子的末端。 （中間沒(méi)有白色）
如何依照盒子的大?。ǜ叨龋┛s放 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>
1
0
0
如 A Haworth 所提到的，剪輯路徑可能更簡(jiǎn)單。為此，請(qǐng)?jiān)诎粹o右側(cè)添加一些 padding ，以便始終為箭頭所在的位置留出空間，然後將 clip-path 整個(gè)元素新增至
.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
