css - 如何在CSS中创建这种卡片布局

Question

我想创建这种卡片布局，如何在卡片的两面都显示蓝色。 我唯一想知道的是如何在卡片的左侧和右侧获得蓝色。

.card {
height: 300px;
width: 400px;
background: #f1f1f1;
}

<div class="card">
<h2>Title</h2>
</div>

Answer 1

你需要用两个 child 的容器包装卡片。

1- 然后添加具有绝对定位的overlay div(这将是蓝色的一面)

2- 卡片(白色 div)

N.P:我已经将 flex 添加到 body 中只是为了让卡片居中，不需要它。

示例:

body {
  background-color: gray;
  display: flex;
}

.card-container {
  position: relative;
  height: 300px;
  width: 400px;
  margin: auto;
}

.overlay {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 90%;
  background: linear-gradient(#4180B9, #42BDBB);
  border-radius: 5px;
}

.card {
  z-index: 2;
  position: relative;
  width: 90%;
  height: 100%;
  margin: auto;
  background-color: #fff;
  border-radius: 5px;
}

<div class="card-container">
  <div class="overlay"></div>
  <div class="card">
  </div>