是否有办法在矩形内创建圆形设计并调整周长?

Question

我想在矩形内创建一个类似于半圆的东西就像这样，背景中的椭圆。

预期设计

我能够在矩形内实现圆，但无法找到一种方法来切割椭圆的额外部分，有人可以帮助我实现所需的设计吗?

实现

.rectangle {
height: 110px;
width:200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
}

position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;  
left: 100px;

Answer 1

您想要隐藏超出矩形的部分

您可以通过在矩形上设置overflow: hidden;来实现。

.rectangle {
height: 110px;
width: 200px;
background-color: #EDEDED;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle {
position: absolute;
border-bottom: 1px solid black;
border-left: 1px solid gray;
width: 110px;
height: 110px;
border-radius: 999px;
right: 0;
bottom: 20px;
left: 100px;
}

<div class="rectangle">
<div class="circle">
</div>
</div>

Answer 2

.rectangle{
height: 110px;
width:200px;
background-color: #313131;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.circle{
position: absolute;
right: 3px;
top: 1px;
width: 93%;
height: 95%;
border-radius: 50%;
background: #404040;
}
.circle-border{
border-radius: 50%;
position: relative;
right: -129px;
top: -6px;
width: 41%;
height: 70%;
border: 2px solid #404040;
}
<div class="rectangle">
<div class="circle-border">

<div class="circle">

</div>

</div>
</div>