Question

正如您所看到的，按钮正在离开圆圈。我该怎么做才能让按钮不会像那样侵入圆圈边框？

如果可能的话，我会很感激CSS和HTML的解决方案，但欢迎任何事情！

到目前为止，这是我的代码：

＆＃13;

    #one{
      border:2px solid black;
      border-radius:50%;
      height:90px;
      width:90px;
  
  
    }

    #unu{
      overflow:auto;
      position:absolute;
      top:20px;
      height:60px;
      width:80px;
      border:2px solid transparent;  
  
    }

    button {
      width:65px;
      height:40px;
    }

＆＃13;

<div id="one">
       <hr style="width:60px;">
       <hr style="position:absolute; left:15px; top:74px; width:70px; " >
       <div id="unu">
          <button>
              <p>
                  ONE
              </p>
          </button>
          <button>
              <p>
                 TWO
              </p>
          </button>
          <button>
              <p>
                  THIRD
              </p>
          </button>
       </div>
    </div>

＆＃13;

Answer 1

一种简洁的方法是将您的内容包装在div.content元素中并应用clip-path: circle。

但目前我可以使用报告低兼容性（https://caniuse.com/#feat=css-clip-path），因此只有在了解您的受众群体时才能使用它。

＆＃13;

#one{
      border:2px solid black;
      border-radius:50%;
      height:90px;
      width:90px;
}

.content {
  width: 100%;
  height: 100%;
  clip-path: circle(45px at 50% 41%);
}

    #unu{
      overflow:auto;
      position:absolute;
      top:20px;
      height:60px;
      width:80px;
      border:2px solid transparent;  
  
    }

    button {
      width:65px;
      height:40px;
    }

＆＃13;

<div id="one">
  <div class="content">
       <hr style="width:60px;">
       <hr style="position:absolute; left:15px; top:74px; width:70px; " >
       <div id="unu">
          <button>
              <p>
                  ONE
              </p>
          </button>
          <button>
              <p>
                 TWO
              </p>
          </button>
          <button>
              <p>
                  THIRD
              </p>
          </button>
       </div>
       </div>
    </div>

＆＃13;

如何将滚动条放入圆圈的一部分而不是？

1 个答案: