如何使用边框半径和背景线性渐变创建元素 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，它与第二个几乎相同，但填充了由第二个旋转引起的空 space。

#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>

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

How create element div top vertical with border radius and background linear gradient

html

css

border-radius