Переполнение: спрятано на 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 малого типа, поэтому у него всегда был один и тот же z-индекс или переполнение, чем у маленького круга div. Может быть, вы могли бы использовать другое дерево HTML DOM.

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

Используйте свойство z-index также в css, добавив это тоже элементы в ваш код CSS

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

.first_triangle{
   z-index: 40;
 }