我正在尝试使一个正常形状的图像在上传到我的网站时转换成以下形状:
使用下面的css，我设法得到了与此接近的东西:
.img {
position: absolute;
left: 0px;
top: -10rem;
width: 100%;
height: 100%;
border-top-right-radius: 10%;
border-bottom-right-radius: 45%;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
}
但它的底部和右侧看起来并不是圆形的，形状很奇怪。
我基本上想要CSS转换任何形状的图像上传成直角/圆圈形状附加，但我正在挣扎。感谢任何帮助。
你是说像这样？？
null
.box {
width: 400px;
height: 400px;
border: 1px solid blue;
overflow: hidden;
}
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background-color: red;
position: relative;
top: -150px;
left: -150px;
}<div class="box">
<div class="circle"> </div>
</div>
您可以使用css剪辑蒙版将图像剪裁成形状。
clip-path: circle(60% at 30% 30%);
如果您需要帮助创建蒙版，请使用Clippy。
