html5 - CSS 三角效果在不同缩放比例下的解决方案？

Question

.box{  width: 300px;  height: 28px;  &::before{    content:"";    width: 0;    height: 0;    border-bottom: 28px solid red;    border-right: 20px solid transparent;    position: absolute;    top: 0px;    right: -20px;    z-index: 1;    cursor: pointer;  }}

这个三角效果在100%的电脑没问题，但是如果用户使用的125%，肉眼可见的便宜了，有解决办法吗？

Answer 1

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代码来实现相同的效果。

请注意，无论你选择哪种方法，都需要在多种设备和缩放比例下进行测试，以确保你的设计在所有情况下都能正常工作。