css - 如何掩盖椭圆形 div 静态内容的 Angular 落？

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 元素的方 Angular ，使它们看起来位于 .oval 元素边框建议的“开口”后面.

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

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

Answer 1

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