1

введите сюда описание изображения

То есть, 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>    

2
  • to ALL Доработан вопрос. Мне показался он интересным для отвечающих и участникам, изучающих CSS, SVG. После внесенных изменений вопрос будет полезен для базы знаний. Прошу поддержать переоткрытие вопроса, иначе он через какое-то время исчезнет 6 июл 2021 в 8:00
  • @Alexandr_TT вопрос не исчезнет, т.к. у него уже есть ответы с положительным рейтингом. Добавлять свой код в вопрос не было необходимости
    – insolor
    6 июл 2021 в 9:58

2 ответа 2

5

Так как края прямоугольника неровные, с выступами, то лучше использовать 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>       

4

Для 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.