css - css3シャドーボックスの上と左+右半分の高さ

Question

上部と左右にcssシャドウを設定しようとしていますが、高さを減らしています。ぼかし/半径に精通していますが、影を本当に短くしたいです。Wix テンプレートからの画像(まだアップロードできません。申し訳ありません)

誰か助けてくれませんか？私が見る最後のチャンスは、おそらくボーダーイメージを使用するでしょうが、可能であれば避けたいと思います。すべての提案に感謝します

Answer 1

遠近法で回転させ、高さの半分だけに寸法を合わせた擬似を使用する1つの可能性：

.test {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: solid 1px red;
  position: relative;
  background-color: white;
}

.test:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  height: 50%;
  left: 0px;
  box-shadow: 0px 0px 15px 2px black;
  transform: perspective(400px) rotateX(-10deg);
  transform-origin: center top;
  z-index: -1;
}

<div class="test"></div>