CSS - 带倾斜和圆角的盒子

Question

我目前正在开发一个 Web 项目，并面临一些与 CSS 相关的问题。我需要帮助为我在下面粘贴的界面元素找到解决方案（响应式）。

我已经尝试了多种方法来使用 CSS（可通过互联网获取）来实现此目的，但我无法使其完美工作。切对角（左上和右下 45 度）- 我可以做到；一个比另一个更大——我能做到；将剩余的两个角（右上角和左下角）倒圆 - 我可以做到。

我失败的是，稍微圆化倾斜的边缘，同时能够控制其他两个角（右上角和左下角）的圆化（应该是独立的）。

我们将非常感谢您在这方面的帮助！

Answer 1

使用 SVG 是一个好主意，但如果您更喜欢纯 HTML 和 CSS，您可以尝试使用 HTML 的

span

标签来创建“剪切”的错觉。

看这个例子：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 10px;
  width: 10rem;
  height: 12rem;
  border: 2px solid #e5e5e5;
  text-align: center;
  border-radius: 10px;
}

div .white:nth-child(1) {
  position: absolute;
  top: -21px;
  left: -22px;
  width: 40px;
  height: 40px;
  background: white;
  border-right: 2px solid #e5e5e5;
  transform: rotate(45deg);
}

div .white:nth-child(2) {
  position: absolute;
  bottom: -21px;
  right: -22px;
  width: 40px;
  height: 40px;
  background: white;
  border-left: 2px solid #e5e5e5;
  transform: rotate(45deg);
}

<div>
  Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

  <span class="white">
  </span>
  <span class="white">
  </span>
</div>