css 如何隐藏div的excedent？[副本]

4sup72z8 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(289)

此问题已在此处有答案：

How to not display an image if outside of div?（3个答案）
Make a DIV not be shown outside it's container（2个答案）
昨天关门了。
在我的网站，我有一个div（圆圈），使用位置在图像中的位置，但圆圈是ocupping一个exedent空间在右边谁是迫使视图宽度增长，如何隐藏只是exedent部分的圆圈？
我不想把圆移动到另一个位置，只是把多余的部分隐藏起来。

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

完整项目代码here in github

css

来源：https://stackoverflow.com/questions/76353860/how-to-hide-just-the-excedent-of-the-div

1条答案

按热度按时间

b09cbbtk1#

您可以防止body溢出：

body {
  overflow-x: hidden;
}

...或者使用一个clip-path来“剪切”主框之外的所有内容：

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

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何隐藏div的excedent？[副本]

1条答案

相关问题

热门标签

最新问答