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

Posted 2023-03-28

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

【英文标题】：How create element div top vertical with border radius and background linear gradient

【发布时间】：2021-09-13 19:57:45

【问题描述】：

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

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

感谢您的 cmets。

它应该如下所示：

【问题讨论】：

如果你向他们表明你至少付出了一些努力，人们就会更有动力帮助你。

【参考方案1】：

为此，您需要 2 个divs，其中 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>

【参考方案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>