用 1 个 div 制作四分之一圆环

Posted 2023-02-25

【中文标题】用 1 个 div 制作四分之一圆环

【英文标题】：Make a quarter circular ring with 1 div

【发布时间】：2017-10-23 05:54:36

【问题描述】：

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

        .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 和蒙版/剪辑属性来完成上述操作。

【参考方案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>