Css 如何屏蔽椭圆形div静态内容的角点？

以下是HTML：

<div class="root">
    <div class="oval">
        <div class="val"></div>
    </div>
</div>

去看看它现在是什么样子

我想屏蔽

.oval.val

元素的方角，使它们看起来位于

.oval

元素边框建议的“开口”后面

.oval.val

元素的右边缘应该从上到下垂直排列，没有任何圆角

---

注意：椭圆.val的宽度可以是0%到100%之间的任何值，包括有问题的值，例如93%。

添加溢出：隐藏；向.oval类添加溢出：隐藏；添加到.oval类。

添加

.oval {
  overflow: hidden;
}

到你的CSS

为了解释这一点，我在

.val

类中添加了背景色

.oval{
盒尺寸：填充盒；
宽度：200px；
高度：100px；
边框：10px纯黑；
边界半径：60px；
位置：相对位置；
溢出：隐藏；
}
.椭圆形.瓦尔{
宽度：93%；
身高：100%；
位置：绝对位置；
}
瓦尔先生{
背景色：红色；
}

添加

到你的CSS

为了解释这一点，我在

.val

类中添加了背景色

.oval{
盒尺寸：填充盒；
宽度：200px；
高度：100px；
边框：10px纯黑；
边界半径：60px；
位置：相对位置；
溢出：隐藏；
}
.椭圆形.瓦尔{
宽度：93%；
身高：100%；
位置：绝对位置；
}
瓦尔先生{
背景色：红色；
}

.oval {
  overflow: hidden;
}