css3 shadow box top и left + right для половины высоты

Question

Я пытаюсь установить тень css для верхней части, а также для левой и правой, но с уменьшенной высотой. Я знаком с размытием/радиусом, но я хочу, чтобы тень была очень короткой. picture from wix template (can not upload yet, извините)

Может кто-нибудь, пожалуйста, помогите мне? Последний шанс, который я вижу, я, вероятно, буду использовать пограничный образ, но я хочу, если это возможно, избегать его. Спасибо за каждое предложение

Answer 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>