css - 如何创建一个 CSS 箭头，它可以缩放到包含 div 的大小？

Question

我有一个 div 需要在合并事件期间从 4 个方向（上、左、右、下）之一显示箭头。div 可以是任意大小，箭头应缩放到 div 大小的 30% 左右。

我不确定如何在不使用 JavaScript 设置三角形大小的情况下将此jsfiddle中的箭头缩放到div 的大小（将鼠标悬停在框上以了解我的意思）。也许你们知道画箭头的更好方法。.boxborder-width

Answer 1

这实际上隐藏了问题，但有时可能有用：（我曾经zoom改变容器的大小）

.box {
  position: relative;
  margin: 20px;  
  width: 20em;
  height: 20em;
  border: 1px solid rgb(77, 77, 77);
  box-shadow: 0px 0px 4px 0px rgb(189, 189, 189),
    0px 0px 0px 0px black inset;
}

.box:hover {
  width: 10em;
  margin: 10px;
  zoom: 200%;
}

.box:before {
  content: '';
  position: relative;
  width: 30%;
  left: 0; right: 80%; 
  height: 40px; 
  top: 45%;
  background: rgba(0,0,0,0.1);
  display: inline-block;
}

.box:after {
  content: '';
  position: absolute;
  left: 30%; top: 45%;
  margin-top: -20px;
  border-style: solid;
  border-width: 40px;
  border-color: transparent transparent transparent rgba(0,0,0,0.1);
}

演示

这里也是带有 svg 数据的箭头，但是当您希望更改箭头的纵横比时不能使用它。

因为边框宽度不能是百分比，所以没有真正的方法来实现目标