html - 如何使用边框半径和背景线性渐变创建元素 div 顶部垂直

Question

我需要创建一个具有不同高度的左上角和右上边框的div，每个顶端的半径分别为50px，加上线性渐变背景色。

你知道是否可以用 CSS 和 HTML 创建它吗？

感谢您的意见。

它应该如下所示：

Answer 1

为此，您需要 2 个div，其中 1 个嵌套在另一个中。

使用旋转子元素并通过应用到父元素来transform: rotate(deg)隐藏溢出的边。overflow:hidden

.parent {
  background-color: #E6E6E6;
  width: 200px;
  height: 200px;
  overflow: hidden;
  padding-top: 8px;
}

.child {
  height: 222px;
  width: 217px;
  margin-left: -10px;
  background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
  border-radius: 25px 25px 0px 0px;
  transform: rotate( -6deg);
}

<div class="parent">
  <div class="child">

  </div>
</div>

Answer 2

是的，有很多操作（基于另一个答案，但更接近示例）：

我们需要三个 div。外层是包装（不可见）。第二种是“不同高度”和渐变的，它被旋转以产生“不同高度”的错觉。最后，我们有另一个 div 几乎与第二个相同，但填充了第二个旋转引起的空白。

#wrapper {
  height: 500px;
  width: 300px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
#f {
  position: absolute;
  width: 100%;
  height: 150%;
  top: 20px;
  left: 18px;
  background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
  border-radius: 10px 25px 0 0;
  transform: rotate(-3deg);
}
#g {
  position: absolute;
  width: 100%;
  height: 150%;
  top: 50px;
  background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
}

<div id="wrapper">
  <div id="f"></div>
  <div id="g"></div>
</div>