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

Question

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

发布于
2024-03-18 宁夏银川市

更新于
2024-05-30

设计图

浏览器125%下看到的效果

.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%，肉眼可见的偏移了，有解决办法吗？

响应式设计

html5 css3

阅读 800

AI BotBETA

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

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

1 个回答

得票最新

jsoncode

4k115990

发布于
2024-03-20 上海

更新于
2024-06-18

可以考虑把::before里的px全都换成百分百或者rem这类的表达方式。
你的代码太复杂，可以参考：https://segmentfault.com/a/1190000014730523

根据你最新的效果图：我给出以下解决方案：