css - 如何用CSS创建一个 "Pear-like"形状

Question

我想用 CSS 创建这个形状。

我试过使用 border-radius 但我不能完全像上面那样。

这是我能想到的最接近的 border-radius 属性 fiddle

.mybox {
  background-image: linear-gradient(to top, #7158FB, #925FE0);
  width: 245px;
  height: 320px;
  border-top-left-radius: 60% 75%;
  border-top-right-radius: 60% 75%;
  border-bottom-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 30%;
}

<div class="mybox"></div>

Answer 1

使用 2 种不同的元素制作它，您将获得更好的渲染效果:

.box {
  width: 245px;
  height: 320px;
  position: relative;
  z-index:0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  background-image:linear-gradient(to right,#7158FB, #925FE0);
  z-index:-1;
}

.box:before {
  top: 0;
  height: 180%;
  right: -16.5%;
  left: -16.5%;
  background-size:100% 32.5%;
  background-repeat: no-repeat;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.box:after {
  bottom: 0;
  height: 42%;
  left: 0;
  right: 0;
  border-bottom-right-radius: 50% 80%;
  border-bottom-left-radius: 50% 80%;
  border-top-right-radius: 4px 25px;
  border-top-left-radius: 4px 25px;
}

<div class="box"></div>

对于随机渐变，您必须像下面这样调整代码:

.box {
  --h:320px;
  width: 245px;
  height: var(--h);
  position: relative;
  z-index:0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  background-image:linear-gradient(30deg,red,green,blue);
  z-index:-1;
}

.box:before {
  top: 0;
  height: calc(var(--h) * 1.8);
  box-sizing:border-box;
  padding-bottom:calc((1.8 - 1 + 0.42) * var(--h));
  right: -16.5%;
  left: -16.5%;
  background-size:100% calc(100%/1.8);
  background-clip:content-box;
  background-repeat: no-repeat;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

.box:after {
  bottom: 0;
  height: calc(var(--h) * 0.42);
  left: 0;
  right: 0;
  border-bottom-right-radius: 50% 80%;
  border-bottom-left-radius: 50% 80%;
  border-top-right-radius: 4px 25px;
  border-top-left-radius: 4px 25px;
  background-size:100% calc(100%/0.42);
  background-position:bottom;
}

<div class="box"></div>