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

【问题标题】：How can I make this shape with background gradients?我怎样才能用背景渐变制作这个形状？
【发布时间】：2019-12-03 09:08:09
【问题描述】：

我想创建这个只有背景的形状。或者可能是剪辑路径和伪元素。

到目前为止，我尝试使用::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 -->

【问题讨论】：

当您希望有人解决您的问题时添加代码。
看看css-tricks.com/working-with-shapes-in-web-design
@VipulSharma 是的。但底部半径与以下答案不同。边界半径不可能。可能是 svg、线性渐变或剪辑路径。
@dgknca 然后至少发布你到目前为止的问题代码进度

标签： css css-shapes linear-gradients radial-gradients

【解决方案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>

如果你想改变形状，请相应地调整形状……希望对你有所帮助！

您可以通过此链接作为参考 https://codepen.io/clairebones/full/dopzvv

【讨论】：

【解决方案2】：

我只使用背景色，但你可以使用渐变色，它会很好用

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

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：

但不完全相同

【解决方案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>

【讨论】：