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

问题描述

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

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

感谢您的评论。

它应该如下所示：

解决方法

为此您需要 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>

,

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

我们需要三个 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,#E9F3FF);
  border-radius: 10px 25px 0 0;
  transform: rotate(-3deg);
}
#g {
  position: absolute;
  width: 100%;
  height: 150%;
  top: 50px;
  background: linear-gradient( 0deg,#E9F3FF);
}

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