创建宽高比为1:1的div,仅知道其高度百分比

Question

我想知道你是否可以帮助我.我有一个div(白色),我需要在边框上放两个圆形按钮(绿色).一切都应该用CSS完成.它应该是这样的: 截图

现在,问题是我不知道白色div的大小,并且在创建时我不会知道它,因为它之后会被添加到DOM中.我所知道的是,白色div相对于其未来的父级具有百分比宽度和高度.因此,在创建时,由于尚未添加,因此对width(),height()或其css值的任何调用都将无效.我已经看过所有那些告诉你如何制作具有固定宽高比的div的片段.我现在需要这个,我需要按钮为1:1,但我所知道的尺寸,是它必须是白色div高度的100%(因此,它的宽度应该等于它的高度).我见过的所有例子都假设您知道宽度并使高度保持比例.在我的情况下,我所知道的是高度(100%),我希望宽度适应.我不知道如何实现这一目标.

这是我的片段:

body{
  background-color: #DCDCDC;
}
.container {
  width: 50%;
  height: 7%;
  background: white;
  border-radius: 20px;
  position: absolute;
}
.arrow {
  background: green;
  border-radius: 20px;
  height: 100%;
  position: absolute;
}
.arrow:after{
  content: "";
  display: block;
  padding-right: 100%;
}
.arrow:last-child {
  right: 0;
}

<div class="container">
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>

https://jsfiddle.net/7bxecL9m/

如果您知道如何在不输入任何固定值的情况下执行此操作(jQuery使用当然有效),我真的很感激.

谢谢.

Answer 1

为什么不为箭头设置固定的百分比宽度：

.arrow {
  background: green;
  border-radius: 20px;
  height: 100%;
  position: absolute;
  width: 10%;
}