用1 div制作四分之一圆环

Question

我使用以下代码

创建了一个四分之一圈

        .quarter {
            position:absolute;
            width:50%;
            height:50%;
            transition:background-color 0.2s ease-in-out;
        }
        .quarter1 {
            top:0;
            left:0;
            border-radius:100% 0 0 0;
        }
        .main-container {
           height: 200px;
           width: 200px
        }

        .cutout {
          width:50%;
          height:50%;
          background-color:white;
          position:absolute;
          top:25%;
          left:25%;
          border-radius:50%;
          pointer-events:none;
      }

HTML CODE

<div class="main-container">
  <div class="quarter quarter1"></div>
  <div class="cutout"></div>
</div>

这会创建以下内容

我想知道是否可以使用1 div和掩码/剪辑属性来完成上述操作。

Answer 1

您也可以使用径向渐变来完成。

＆＃13;

＆＃13;

.quarter_ring {
   width: 100px;
   height: 100px;
   background: radial-gradient(ellipse at 100% 100%, transparent 0%, transparent 40%, red 41%, Red 70%, transparent 71%, transparent 100%);
}

＆＃13;

<div class='quarter_ring'></div>

＆＃13;

＆＃13;

＆＃13;