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

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

这将创建以下内容

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

Answer 1

您也可以使用径向渐变。

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

用 1 div 做一个四分之一圆环

Make a quarter circular ring with 1 div

html

css

mask

clip