如何用css创建“梨状”形状

Question

我想用css创建这个形状。

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

这是我最接近边界半径属性小提琴

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

Answer 2

尝试使用border-radius

 .mybox { background-image: linear-gradient(to top, #7158FB, #925FE0); width: 245px; height: 320px; border-radius: 48% 52% 50% 50% / 69% 68% 32% 31%; } 

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