Как сверстать такие карточки?

Question

У меня вот что получается, но как сделать это как на картинке? У меня не получается сделать такую тень, как на картинке.

div {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 180px;
  height: 100px;
  background: #e1e1e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

<div></div>
<div></div>
<div></div>

Answer 1

* {
  margin: 0;
  padding: 0;
}

.cards {
  position: relative;
  z-index: 1;
}

.card {
  float: left;
  position: relative;
  width: 180px;
  height: 100px;
  margin: 5px;
  background: #e1e1e1;
  border: .1em solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

.card:before,
.card:after {
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 70%;
  max-height: 100px;
  max-width: 300px;
  height: 55%;
  z-index: -1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: skew(-15deg) rotate(-6deg);
}

.card:after {
  left: auto;
  right: 10px;
  transform: skew(15deg) rotate(6deg);
}

<div class="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

БЛОГ НА HUSL

Как сверстать такие карточки?

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