4

Подскажите пожалуйста, как с помощью CSS сделать такой блок.
Задний фон белый и цвет блока белый, для их отделения используется тень, но через эту самую тень блок отображается неправильно. Есть у кого идеи как это можно реализовать?

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

.block {
  position: relative;
  width: 417px;
  height: 592px;
  padding: 45px 30px;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 5px 20px #dbdbdb;
  background-color: #fff;
}

.block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(40px * 2);
  height: 40px;
  background-color: #fff;
  border-bottom-left-radius: calc(40px * 2);
  border-bottom-right-radius: calc(40px * 2);
  box-shadow: 0 5px 20px #dbdbdb;
}
<div class="block"></div>

1
  • В чём именно неправильность?
    – Coder
    28 июл 2019 в 8:08

1 ответ 1

5

Еще один svg вариант

M 0 0              // встаем в точку 0 0
h 40               // рисуем линию вправо на 40
a 10 10 0 0 0 20 0 // рисуем дугу радиусом 10 до точки, которая находится на 20 вправо
h 40               // рисуем линию вправо на 40
v 140              // рисуем линию вниз на 140
a 5 5 0 0 1 -5 5   // рисуем дугу радиусом 5 до точки, которая находится на 5 влево и на 5 вниз
h -90              // рисуем линию влево на 90
a 5 5 0 0 1 -5 -5  // рисуем дугу радиусом 5 до точки, которая находится на 5 влево и на 5 вверх
z                  // замыкаем фигуру

<svg viewbox="-10 -10 120 170">

  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="0" stdDeviation="4" flood-color="rgba(0,0,0,0.3)" />
    </filter>
  </defs>

  <path fill="white" filter="url(#shadow)" d="
    M 0 0 
    h 40
    a 10 10 0 0 0 20 0
    h 40
    v 140
    a 5 5 0 0 1 -5 5
    h -90
    a 5 5 0 0 1 -5 -5
    z
  "></path>
</svg>

2
  • не еще один, а единственный хороший!) я свой уберу)
    – SVE
    28 июл 2019 в 12:51
  • @HamSter ну зачем же так, Вы ведь старались :) 28 июл 2019 в 12:58

Ваш ответ

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

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