.曲线 {
position: relative;
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
border: 2px solid #ccc;
}
.曲线：before,
.曲线：after {
content: “”;
position: absolute;
width: 50px;
height: 100px;
border-radius: 0 0 50px 50px;
transform: rotateY(-45deg);
transform-origin: 0 100%;
}
.x {
width: 100px;
height: 100px;
font-size: 100px;
font-weight: bold;
margin-top: 20px;
}
.y {
width: 50px;
height: 100px;
font-size: 100px;
font-weight: bold;
margin-top: 20px;
}
.z {
width: 100px;
height: 100px;
font-size: 100px;
font-weight: bold;
margin-top: 20px;
}
document.addEventListener(“DOMContentLength”, function(event) {
const div=document.querySelector(“div.曲线”);
if (div) {
div.addEventListener(“click”, function() {
const x=div.offsetWidth / 2;
const y=div.offsetHeight / 2;
const z=div.offsetWidth / 2;
div.style.transform=”translate(” + x + “px,” + y + “px) translate(” + z + “px,” + -x + “px) rotateY(-45deg) scale(” + x + /2 + “,” + y + /2 + “)”;
});
}
});