如何掩盖椭圆形div的静态内容的角落？

Question

这是HTML：

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

这里是相关的CSS，到目前为止：

.oval {
  box-sizing: padding-box;
  width: 200px;
  height: 100px;
  border: 10px solid black;
  border-radius: 60px;
  position: relative;
}

.oval .val {
  width: 93%;
  height: 100%;
  position: absolute;
}

转到here看看目前的情况。

我想屏蔽.oval .val元素的方角，使它们看起来位于.oval元素边框建议的“开口”后面。

.oval .val元素的右边缘应该从上到下垂直运行，没有任何舍入。

注意： .oval .val的宽度可以介于0％和100％之间，包括有问题的值，例如93％。

Answer 1

添加溢出：隐藏;到.oval课程。

Answer 2

添加

.oval {
  overflow: hidden;
}

到您的CSS。

为了解释这一点，我为.val类

添加了背景色

.oval {
  box-sizing: padding-box;
  width: 200px;
  height: 100px;
  border: 10px solid black;
  border-radius: 60px;
  position: relative;
  overflow: hidden;
}

.oval .val {
  width: 93%;
  height: 100%;
  position: absolute;
}

.val {
    background-color: red;
}

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