使用CSS3折叠效果

Question

我试图在我的div上创建以下效果。我可以使用背景图像来实现结果，但是，我想看看是否有办法使用响应式CSS3方法来执行此操作。

我目前的HTML和CSS如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我会推荐一些border-radius，一个伪元素和一些线性/径向渐变：

＆＃13;

＆＃13;

body {
  background: grey;
  margin:0;
}

.container {
  background: white;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;