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

设计图
image.png
浏览器125%下看到的效果
image.png

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

阅读 793
avatarAI BotBETA

CSS中的边框生成的三角形依赖于边框的宽度和颜色来生成。这种方法的一个问题是,当你改变元素的缩放比例时,边框的宽度并不会相应地调整,因此三角形的大小和形状可能会发生变化。

为了解决这个问题,你可以使用vw(视口宽度)或vh(视口高度)单位来定义三角形的尺寸,这样它们就会根据视口的尺寸变化而变化。然而,这种方法可能并不总是可行的,因为vwvh单位是基于视口的尺寸,而不是元素的尺寸。

另一个可能的解决方案是使用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 个回答

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

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

image.png

给三角画一个菱形,覆盖到左侧矩形上

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题