How to make CSS shape crop itself to fit browser window instead of making it wider

Question

Maybe this question was already asked, but it's really hard to find anything with my low tier vocabulary :(.

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

I'm trying to make this giant shape to fit browser window, instead of making entire page wider. I want it to be cropped on top and right side, so only the other half would be visible to me.

Effect i'm trying to achieve looks like this: 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>