我怎样才能用背景渐变制作这个形状？

Question

我想创建这个只有背景的形状。或者 clip-path & pseudo-element.

到目前为止我已经尝试过 ::before

div {
  height: 300px;
  width: 400px;
  background: tomato;
  border-radius: 0 0 5px 0;
  position: relative;
}
div::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: inherit;
  height: 400px;
  background: red;
  bottom: -395px;
  border-radius: 0 0 400px 0;
}

.abs {
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

body {
  margin: 0;
}

<div></div>

<img src="https://i.hizliresim.com/LvZGL1.png" alt="" class="abs"> <!-- intended shape -->

Answer 1

* {
  margin: 0;
  padding: 0;
}

.bg {
  background: #e4f5fc;
  background: -webkit-linear-gradient(left,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  background: -webkit-gradient(linear,  left top, right top,  from(#e4f5fc),color-stop(50%, #bfe8f9),color-stop(51%, #9fd8ef),to(#2ab0ed));
  background: -o-linear-gradient(left,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  background: linear-gradient(to right,  #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=1 );
  padding: 600px 0;
  -webkit-clip-path: inset(0% 0% 0 round 0 0% 100% 0%);
          clip-path: inset(0% 0% 0 round 0 0% 100% 0%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="bg">
  
</section>
</body>
</html>

如果您想更改形状，请相应地调整形状...希望对您有所帮助！

作为参考，您可以查看此 link https://codepen.io/clairebones/full/dopzvv

Answer 2

I am using only background color, but you can use your gradient color, it will be worked fine

 
.shape {
 position: relative;
 background: #EC6A56;
 width: 300px;
 height: 800px;
 border-bottom-right-radius: 390px;
}

<div class="shape"></div>

Answer 3

可以考虑倾斜变换结合一些溢出和半径：

.box {
  width: 200px;
  height: 280px;
  position: relative;
  overflow:hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100px 50px;
  background: linear-gradient(26deg,red,blue);
  transform: skewY(-26deg);
  transform-origin: left;
}

<div class="box">

</div>

我怎样才能用背景渐变制作这个形状？

How can I make this shape with background gradients?

css

css-shapes

linear-gradients

radial-gradients