Question

我正在处理一个包含 <div> 元素的网页，这些元素的分隔方式如下：

分隔符的图片

picture of the separator

我尝试过使用剪辑路径、伪元素、SVG - 但我找不到一种方法来实现具有内部边框阴影和“反向”边框半径的过渡。有没有人设法使用 CSS 做出这样的事情？

这是我当前的代码（和一个 CodePen Link）：

body {
  background: grey;
}

#container {
  background: white;
  /* Same as the #sec2 background */
}

.section {
  background-color: white;
  padding: 20px 0px;
  width: 100%;
  min-height: 100px;
  text-align: center;
}

#sec1 {
  background-color: #f5f5f5;
  box-shadow: inset 0 0em 30px #00000033;
  border-radius: 0em 0em 0em 4em;
}

#sec2 {
  border-radius: 0em 4em;
}

<body>
  <div id="container">
    <section id="sec1" class="section">
      [content]
    </section>
    <section id="sec2" class="section">
      [other content]
    </section>
  </div>
</body>

如何使用阴影做反向边界半径？

0 个答案: