如何在CSS中创建一个根据屏幕尺寸改变大小的向下箭头？

Question

我有一个向下的 CSS 箭头。

.bottom {
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 0.2em solid #333;
  border-radius: 50%;
}

.bottom:after {
  content: '';
  display: inline-block;
  margin-top: 0.2em;
  width: 0.7em;
  height: 0.7em;
  border-top: 0.2em solid #333;
  border-right: 0.2em solid #333;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div class="accordionArrow">
    <a href="#"><span class="bottom"></span></a>
</div>

这段代码按预期工作。它创建一个圆圈并在中心放置一个向下的箭头。如果我调整窗口宽度，圆圈保持相同大小，箭头保持在中心。

但是，我的 CSS 中的所有其他属性均以“vw”表示。这样，当我调整窗口大小时，字体也会改变大小。我尝试将此 CSS 中的“em”尺寸转换为“vw”，但它无法正常工作。当我更改窗口大小时，箭头移出圆圈。 我需要做什么？

Answer 1

我会使用 SVG（内联或外部）而不是进行 CSS hack。

.i1 {
  width: 10vw;
}

<img class="i1" src="https://donald.au/bugs/so-78337837/arrow-circle.svg">

运行此代码片段后，使用完整页面链接来测试响应能力。