html - 用1 div制作四分之一圆环

我使用以下代码创建了四分之一圈

        .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代码

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

这将创建以下内容


我想知道是否可以仅使用1 div和mask / clipping属性来执行上述操作。

最佳答案

您也可以使用径向渐变。

.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%);
}

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

关于html - 用1 div制作四分之一圆环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46882765/