gpt4 book ai didi

html - 如何切割溢出的div css

转载 作者:行者123 更新时间:2023-11-28 16:07:55 25 4
gpt4 key购买 nike

我需要知道如何从蓝色框中切下灰色部分。

enter image description here

下图中的红色箭头显示了我想从蓝色框中剪切的部分。这是我的代码:

.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}

.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>

最佳答案

据我了解,您希望将蓝色区域之外的灰色部分剪掉。如果是这样,请按以下步骤操作。

.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}

.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>

关于html - 如何切割溢出的div css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38824293/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com