如何在矩形内创建可调整周长的弧形椭圆并裁剪多余部分？

问题分析 #

当前代码存在两个核心问题：

• 父容器未设置溢出裁剪，导致圆形元素超出矩形的部分无法隐藏
• 子元素的尺寸和圆角设置为圆形，无法实现半椭圆效果

修改后的完整代码 #

.rectangle {
    height: 110px;
    width: 200px;
    background-color: #EDEDED;
    border-radius: 9px;
    position: relative;
    overflow: hidden; /* 添加裁剪规则，隐藏超出容器的内容 */
}

.rectangle::after {
    content: "";
    position: absolute;
    border-bottom: 1px solid black;
    border-left: 1px solid gray;
    width: 220px; /* 调整宽度适配半椭圆范围 */
    height: 110px; /* 高度与矩形一致 */
    border-radius: 50% 0 0 50%; /* 左侧半圆+右侧直角，构成半椭圆形状 */
    right: -55px; /* 调整位置，让椭圆仅在矩形内显示需要的部分 */
    bottom: 0; /* 贴紧矩形底部 */
}

关键改动说明 #

• overflow: hidden：给父容器添加该属性后，子元素超出矩形边界的部分会被自动裁剪，解决多余内容显示的问题
• 调整border-radius与尺寸：通过50% 0 0 50%将圆形改为半椭圆，配合宽度调整和位置偏移，让椭圆的有效部分刚好落在矩形内
• 使用伪元素::after：无需额外添加HTML元素，实现更简洁的结构

内容的提问来源于stack exchange，提问作者Nikolai