如何使 CSS 形状自身裁剪以适合浏览器 window 而不是使其变宽
How to make CSS shape crop itself to fit browser window instead of making it wider
也许这个问题已经有人问过了,但我的低级词汇量真的很难找到任何东西:(。
.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>
我试图让这个巨大的形状适合浏览器 window,而不是让整个页面变宽。我希望它在顶部和右侧被裁剪,所以我只能看到另一半。
我想要达到的效果如下所示:
example
.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>
也许这个问题已经有人问过了,但我的低级词汇量真的很难找到任何东西:(。
.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>
我试图让这个巨大的形状适合浏览器 window,而不是让整个页面变宽。我希望它在顶部和右侧被裁剪,所以我只能看到另一半。
我想要达到的效果如下所示: example
.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>