使用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