在我的網站上，我有一個div(圓圈),使用position在圖像中的那個位置，但是圓圈在右邊占據了一個多余的空間，是誰迫使視圖寬度增加的，如何隱藏圓圈的多余部分？

我不想為了另一個位置移動圓圈，只是隱藏多余的部分。

.floating-circles .big-circle {
  position: absolute;
  z-index: 1;
  right: calc((-35vw / 2) + 9%);
  bottom: calc((-35vw / 2) + 14%);
  overflow: hidden;
  overflow-x: hidden;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: rgb(146, 28, 205);
  background: linear-gradient(45deg, rgba(146, 28, 205, 1) 0%, rgba(153, 26, 177, 1) 40%, rgba(48, 35, 174, 1) 80%, rgba(48, 35, 174, 1) 100%);
}

<div class="floating-circles">
  <div class="small-circle"></div>
  <div class="big-circle"></div>
  <!-- The big-circle is the circle causing the bug -->
</div>

你可以阻止身體溢出:

body {
  overflow-x: hidden;
}

...或者使用剪輯路徑& quot削減& quot主框之外的所有內容:

.floating-circles {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  /* or clip-path: inset(0) */
  /* Thanks @TemaniAfif for the suggestion! */
}

試試看:

.floating-circles {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}


/* Demo only */

.floating-circles {
  position: relative;
  top: 4em;
  height: 200px;
  width: 500px;
  background: #ddd;
}

.floating-circles .big-circle {
  position: absolute;
  right: -25px;
  bottom: -40px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(146, 28, 205, 1) 0%, rgba(153, 26, 177, 1) 40%, rgba(48, 35, 174, 1) 80%, rgba(48, 35, 174, 1) 100%);
}

<div class="floating-circles">
  <div class="big-circle"></div>
</div>