css - 含まれているdivのサイズに合わせて拡大縮小するCSS矢印を作成するにはどうすればよいですか？

Question

マージイベント中に4つの方向（上、左、右、下）のいずれかから矢印を表示する必要があるdivがあります。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データの矢印ですが、矢印の縦横比を変えたい場合は使えません。

境界線の幅をパーセンテージにすることはできないため、目標を達成する実際の方法はありません