我想做一个路标的形式按钮(与提示矩形)。
_______
| \
|_______/
我想动态地将文本写入标志中,每一个都有不同的长度。如果我只使用一个图形作为背景图形,那么箭头会相应地缩放和压缩/拉伸。因此,将文本放入一个普通的div中,并使用CSS:after将箭头附加为SVG。箭头应该被完全填充,也就是说,我不必处理框架问题。(为了增加可见性,我将SVG留为黑色)我的第一个问题是箭头总是在块中,而不是在块后面。我使用position:absolute解决了这个问题;。但是进一步的微调失败了,因为我不能根据代码块的结尾用left来定位:右边:
问题:
- 我该如何定位,使三角形总是准确地连接到盒子的末端。(中间没有白色)
- 我怎样才能缩放SVG的大小(高度)的方块。(以便边缘适合)(也许还考虑的填充)
或者我是不是完全错误地使用了via:after和的方法,而应该在HTML中的文本(text ay enclosed with)后面附加箭头(作为SVG文件)direkt,然后用括起来?但实际上我想避免这种情况,通过CSS插入会更好。但如果这是更有用的方法,我可以接受。
x一个一个一个一个x一个一个二个x
1条答案
按热度按时间gzszwxb41#
正如AHaworth提到的,clip-path可能更简单,要做到这一点,在按钮的右边添加一些
padding
,以便始终为箭头留出空间,然后添加整个元素clip-path