溢出：隐藏在2个圆上

Question

我去创建了一个三角形，其中隐藏了溢出，以隐藏超出2个圆的零件，但是我只倒1个圆，但是没有两个。

<div class="big_rond">
        <div class="small_rond">
            <ul>
                <li class="first_triangle"></li>

            </ul>
        </div>
</div>

.big_rond {
    background:#bfd70e;
    border-radius:50%;
    width: 500px;
    height: 500px;
    border:2px solid #679403; 
    margin: auto;
    margin-top: 5%;
    overflow: hidden;
    position: relative;
}

.small_rond {
    background:red;
    border-radius:50%;
    width:150px;
    height:150px;
    border:2px solid red; 
    margin: auto;
    margin-top: 30%;
}

ul {
    list-style: none;
    display: flex;
    flex-direction: row;
}

li {
}

.first_triangle {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    margin-left: 20%;
    border-width: 80px 300px 80px 0;
    border-color: transparent #007bff transparent transparent;
}

我去了2个圈子，隐藏了以外的部分

Answer 1

问题在于三角形是小圆形div的子代，因此它始终具有与小圆形div相同的z索引或上溢。 也许您可以使用另一个HTML DOM树。

<div class="big_rond">
   <ul>
      <li class="first_triangle"></li>
   </ul> 
</div>
<div class="small_rond"><div>

也在CSS中使用z-index属性，并将此元素也添加到CSS代码中

.small-rond{
    z-index: 50;
  }

.first_triangle{
   z-index: 40;
 }