CSS中的边框生成的三角形依赖于边框的宽度和颜色来生成。这种方法的一个问题是,当你改变元素的缩放比例时,边框的宽度并不会相应地调整,因此三角形的大小和形状可能会发生变化。
为了解决这个问题,你可以使用vw
(视口宽度)或vh
(视口高度)单位来定义三角形的尺寸,这样它们就会根据视口的尺寸变化而变化。然而,这种方法可能并不总是可行的,因为vw
和vh
单位是基于视口的尺寸,而不是元素的尺寸。
另一个可能的解决方案是使用SVG来创建三角形。SVG元素是矢量图形,因此它们在缩放时不会失去清晰度或形状。你可以使用CSS来控制SVG的大小和位置,这样你就可以确保三角形在不同缩放比例下都看起来很好。
例如,你可以创建一个SVG元素,如下所示:
<svg width="0" height="0" viewBox="0 0 20 28" preserveAspectRatio="none">
<path d="M0,28 L20,0 Z" fill="red" />
</svg>
然后,你可以使用CSS来控制它的大小和位置:
.box {
position: relative;
width: 300px;
height: 28px;
}
.box svg {
position: absolute;
top: 0;
right: -20px;
width: 20px;
height: 28px;
}
这样,无论用户如何缩放页面,SVG三角形都会保持其形状和清晰度。然而,这种方法的一个潜在缺点是它可能需要更多的标记和CSS代码来实现相同的效果。
请注意,无论你选择哪种方法,都需要在多种设备和缩放比例下进行测试,以确保你的设计在所有情况下都能正常工作。
可以考虑把::before里的px全都换成百分百或者rem这类的表达方式。
你的代码太复杂,可以参考:https://segmentfault.com/a/1190000014730523
根据你最新的效果图:我给出以下解决方案:
给三角画一个菱形,覆盖到左侧矩形上