使用HTML、CSS和SVG建立可擴充的路標

Question

我想製作一個路標形式的按鈕（有尖端的矩形）。

_______
|       \
|_______/

我想動態地將文字寫入標誌中，每個文字都有不同的長度。 如果我僅使用圖形作為背景圖形嘗試此操作，則箭頭會相應地縮放並壓縮/拉伸。 因此，將文字放入普通 div 中並使用 CSS :after 將箭頭附加為 SVG 的方法。 箭頭應該完全填充，即我不必處理框架問題。 （為了增加可見性，我將 SVG 保留為黑色） 我的第一個問題是箭頭始終位於區塊中而不是後面。我用position:absolute;解決了這個問題。但進一步的微調失敗了，因為我無法根據左：和右：塊的末尾進行定位

問題：

• 我該如何定位才能使三角形始終準確地連接到盒子的末端。 （中間沒有白色）

• 如何依照盒子的大小（高度）縮放 SVG。 （以便邊緣適合）（也許還考慮到的填充）

或者我是否完全走上了錯誤的道路：after 的方法，而應該在文本後面的 HTML 中附加箭頭（作為 SVG 文件）直接（文本用 括起來）並將所有內容都用 括起來？但實際上我想避免這種情況，透過 CSS 插入會更好。但如果這是更有用的方式，我可以接受。

.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

如 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%);
}

Test




Test with more text




Test with multi-line text