在不同的缩放级别上保持 css 右箭头的大小相同答案

【问题标题】：Keep css right arrow same size on different zoom levels在不同的缩放级别上保持 css 右箭头的大小相同
【发布时间】：2020-11-13 15:53:20
【问题描述】：

我的 CSS 中有一个右箭头，我试图在 100% 缩放和 80% 缩放级别上保持箭头的大小相同。目前，当我放大到 80% 时，它正在改变大小。

我拥有的其他箭头（如上箭头或左箭头）不这样做。

我在这里做了一个堆叠闪电战

https://stackblitz.com/edit/angular-ivy-mdhw4t?file=src/app/app.component.css

这是我的代码

.arrow-box {
  border: 4px solid #1a202c;
  position: relative;
  right: 35%;
  background: #1a202c;
}

.arrow-box:after, .arrow_box:before {
    left: 97%;
    top: 40%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #1a202c;
    border-width: 30px;
    margin-top: -15px;
}

.arrow-box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #1a202c;
    border-width: 36px;
    margin-top: -36px;
}



.stay-invested-tip {
  background-color: #1a202c;
  box-shadow: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
  margin-left: 570px;
  margin-top: 753px;
  width: 35%;
  position: absolute;
  height: 260px;
  padding: 0%;
}


<div class="pop-up-wrap" >
    <div class="savings-tip arrow-box sm:mt-6 sm:p-4">
        <div>
        <p class="font-hairline text-2xl leading-tight mb-1 connect-advice-font-title">View the impact on your financial future if you move your savings</p>
        <p class="connect-advice-font-title less-padding weight-400">See how your projected retirement (age and income), on the right, will be affected as you move the slider.</p>
        </div>
        <div class="flex flex-row my-4 float-left got-it-btn-div">
        <button  class="connect-advice-btn font-semibold mr-12 w-2/5 text-sm shadow-md text-center right-0 p-2 rounded-full text-white uppercase cursor-pointer weight-400">got it</button>
        </div>
    </div>
</div>

100% 看起来像这样

在 80% 时，它看起来像这样

但是就像我说的，如果我做一个上箭头或左箭头，那么这不会发生

【问题讨论】：

这是因为伪元素位于left: 97%; - 所以当容器元素的宽度发生变化时，这反过来会改变隐藏在容器后面的三角形的多少。将伪元素放置在 100% 的位置，然后将其向左移动所需的像素数量，例如 left: calc(100% - 20px) 或其他内容。
@CBroe 啊谢谢，请标记为答案，我会标记为正确

标签： html css

【解决方案1】：

这是因为伪元素位于left: 97%;，因此当容器元素的宽度发生变化时，这反过来会改变隐藏在容器后面的三角形的多少。

将伪元素完全定位为 100%，然后将其向左移动所需的像素数量，例如 left: calc(100% - 20px) 或其他内容。

【讨论】：