css - 如何使 CSS 形状自身裁剪以适合浏览器窗口而不是使其变宽

Question

也许这个问题已经有人问过了，但我的低级词汇量真的很难找到任何东西:(。

.first {
  height: 100vh;
  width: 100vh;
  position: absolute;
}

.bg1 {
  position: relative;
  height: 600px;
  width: 600px;
  background-color: black;
  transform: rotate(-15deg);
  border-radius: 125px;
  top: -100px;
  left: 800px;
  z-index: -2500;
  display: inline-block;
}

<div class="first">
  <div class="bg1">
  </div>
</div>

我试图让这个巨大的形状适合浏览器窗口，而不是让整个页面变宽。我希望它在顶部和右侧被裁剪，这样我只能看到另一半。

我想要达到的效果是这样的: example

Answer 1

.first {
  height: 100vh;
  width: 100%
}

.bg1 {
width: 300px;
height: 300px;
border-radius: 50px;
background: #333;
position: fixed;
top: -30px;
right: -100px;
transform: rotate(75deg)
}

<div class="first">
  <div class="bg1">
  </div>
</div>