Question

我想仅用背景创建此形状。或可以剪切路径和伪元素。

到目前为止，我已经尝试过::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

您可以考虑结合一些溢出和半径的偏斜变换

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

Answer 2

* {
  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

Answer 3

我仅使用背景色，但可以使用渐变色，效果会很好

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

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

如何使用背景渐变制作此形状？

3 个答案: