Как сверстать такой блок с box-shadow или с помощью других атрибутов CSS?

Question

То есть, box-shadow виден только начиная с середины блока, и снизу тени больше, чем у краев. Форма границ не ровная, с выпуклостями, поэтому затруднительно точно воспроизвести её с помощью CSS.
В векторном редакторе нарисована эта криволинейная форма. См. ниже.

Как сверстать такой блок с box-shadow или с помощью других атрибутов CSS или SVG?

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="411" height="519" viewBox="0 10 411 519" >  
    <path  fill="#fff" stroke="#CDCDCD" stroke-width="3"  class="shadow"
     d="M390.2 2.7V30c0 0 5.6 7.8 5.5 12.3-0.6 20.8-1.4 53.2-1.4 53.2l-5.5 57.3v98.2l4.1 23.2-6.8 36.8c0 0 5.2 109.8 2.7 156.9-0.3 6.5 2.5 25.9-19.1 25.9-111.6 0.3-210.5 0-322 0-10.7 0-19-15.2-19.1-25.9-0.4-31 0-102.3 0-102.3l-4.1-23.2c0 0-4.1-11-2.7-16.4 1.5-5.6 10.8-7.8 10.9-13.6C34.4 224.9 30 15 30 15V0.7L377.9 2Z"  />
</svg>

Answer 1

Для box-shadow укажите <offset-y>.

.box-shadow {
  display: block;
  width: 200px;
  height: 250px;
  border-radius: 5px;
  border: 1px solid red;
  background: #fff;
  box-shadow: 0 5px 5px 0px black;
}

<div class="box-shadow"></div>

Подробнее о box-shadow

Answer 2

Так как края прямоугольника неровные, с выступами, то лучше использовать SVG для повторения формы краев прямоугольника.

Тень можно создавать, как фильтрами CSS, так и SVG

Вариант CSS

.shadow {
  -webkit-filter: drop-shadow( 0px 0px 12px rgba(0, 0, 0, .2));
  filter: drop-shadow( 0px 0px 12px rgba(0, 0, 0, .2));
 }

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="411" height="519" viewBox="0 10 411 519" >  
    <path  fill="#fff"  class="shadow"
     d="M390.2 2.7V30c0 0 5.6 7.8 5.5 12.3-0.6 20.8-1.4 53.2-1.4 53.2l-5.5 57.3v98.2l4.1 23.2-6.8 36.8c0 0 5.2 109.8 2.7 156.9-0.3 6.5 2.5 25.9-19.1 25.9-111.6 0.3-210.5 0-322 0-10.7 0-19-15.2-19.1-25.9-0.4-31 0-102.3 0-102.3l-4.1-23.2c0 0-4.1-11-2.7-16.4 1.5-5.6 10.8-7.8 10.9-13.6C34.4 224.9 30 15 30 15V0.7L377.9 2Z"  />
</svg>

Вариант SVG

<style>
.shadow {
  filter:url(#dropshadow);
 }
</style>
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="411" height="519" viewBox="0 10 411 519" > 
<defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="10"/> 
      <feOffset dx="0" dy="6" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>        
        
    <path  fill="#fff"  class="shadow"
     d="M390.2 2.7V30c0 0 5.6 7.8 5.5 12.3-0.6 20.8-1.4 53.2-1.4 53.2l-5.5 57.3v98.2l4.1 23.2-6.8 36.8c0 0 5.2 109.8 2.7 156.9-0.3 6.5 2.5 25.9-19.1 25.9-111.6 0.3-210.5 0-322 0-10.7 0-19-15.2-19.1-25.9-0.4-31 0-102.3 0-102.3l-4.1-23.2c0 0-4.1-11-2.7-16.4 1.5-5.6 10.8-7.8 10.9-13.6C34.4 224.9 30 15 30 15V0.7L377.9 2Z"  />
</svg>

БЛОГ НА HUSL

Как сверстать такой блок с box-shadow или с помощью других атрибутов CSS?

Ответы (2 шт):

Вариант CSS

Вариант SVG