我想用CSS创建此形状。
我已经尝试过使用边界半径，但是我不能完全像上面那样。
这是我能提出的最接近边界半径属性的 小提琴
.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%;
}
Temani Afif.. 5
使用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;
}
对于随机梯度，您必须调整如下代码：
.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;
}
使用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;
}
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有