用html，css和SVG可浏览路标

8i9zcol2 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(170)

我想做一个路标的形式按钮（与提示矩形）。

_______
|       \
|_______/

我想动态地将文本写入标志中，每一个都有不同的长度。如果我只使用一个图形作为背景图形，那么箭头会相应地缩放和压缩/拉伸。因此，将文本放入一个普通的div中，并使用CSS：after将箭头附加为SVG。箭头应该被完全填充，也就是说，我不必处理框架问题。（为了增加可见性，我将SVG留为黑色）我的第一个问题是箭头总是在块中，而不是在块后面。我使用position：absolute解决了这个问题;。但是进一步的微调失败了，因为我不能根据代码块的结尾用left来定位：右边：
问题：

我该如何定位，使三角形总是准确地连接到盒子的末端。（中间没有白色）
我怎样才能缩放SVG的大小（高度）的方块。（以便边缘适合）（也许还考虑的填充）

或者我是不是完全错误地使用了via：after和的方法，而应该在HTML中的文本（text ay enclosed with）后面附加箭头（作为SVG文件）direkt，然后用括起来？但实际上我想避免这种情况，通过CSS插入会更好。但如果这是更有用的方法，我可以接受。
x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/75102577/skalable-signpost-with-html-css-and-svg

1条答案

按热度按时间

gzszwxb41#

正如AHaworth提到的，clip-path可能更简单，要做到这一点，在按钮的右边添加一些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%);
}

<div class="querverweis">Test</div>
<br>
<br>
<div class="querverweis">Test with more text</div>
<br>
<br>
<div class="querverweis" style="max-width:6rem">Test with multi-line text</div>

赞(0）回复(0）举报 2023-01-14

我来回答

用html，css和SVG可浏览路标

1条答案

相关问题

热门标签

最新问答