css - 折叠效果使用CSS3

Question

我正在尝试在我的 div 上创建以下效果。我可以使用背景图片实现结果，但是，我想看看是否有一种方法可以使用响应式 CSS3 方法来实现。

我当前的 HTML 和 CSS 如下所示:

body {
  background: black;
}
.container {
  background: red;
}
.item {
  background: white;
  width: 50%;
  margin: 0 auto;
  padding: 20px;
}

<div class="container">
  <div class="item">
    <h1>Content Header</h1>
    <p>Body Content</p>
  </div>
</div>

Answer 1

我会使用 border-radius、一个伪元素和一些线性/径向渐变:

body {
  background: grey;
  margin:0;
}

.container {
  background: red;
}

.item {
  position:relative;
  background: 
    linear-gradient( 160deg, blue 60%,transparent 60.5%) right,
    linear-gradient(-160deg, blue 60%,transparent 60.5%) left;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  width: 50%;
  margin: 80px auto 50px;
  padding: 20px 20px 100px;
  color:#fff;
}
.item:before {
  content:"";
  position:absolute;
  bottom:100%;
  height:20px;
  right:0;
  left:-20px;
  background:
    radial-gradient(circle at bottom left, #ccc 20px, transparent 21px), 
    blue;
  border-radius:20px 20px 0 0;
}

<div class="container">
  <div class="item">
    <h1>Content Header</h1>
    <p>Body Content</p>
  </div>
</div>