我需要只使用 css 有一個如下所示的半拱形。
嘗試使用剪輯路徑，但結果不一樣。
clip-path: circle(63.5% at 100% 63%);
uj5u.com熱心網友回復：
也許是這樣的？
您應該根據您的 div 寬度定義 border-radius 值。
.arch-div{
position:absolute;
width:40%;
right:0;
height:100%;
background-color:black;
border-top-left-radius:300px;
}
.container{
height:200px;
background-color:darkgreen;
position:relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body >
<div class="container">
<div class="arch-div">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
顯示的影像并沒有完全顯示四分之一圓 - 它看起來更像是一種橢圓形/橢圓形的四分之一。
無需向主 HTML 添加額外元素，您可以使用 after 偽元素添加此“四分之一”。
此代碼段使用縱橫比來設定尺寸，但您當然可以根據需要使用實際尺寸并更改測量值以準確獲得所需的形狀。
.cutout {
height: 50vh;
aspect-ratio: 16/9;
display: inline-block;
background: teal;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.cutout::after {
content: '';
display: inline-block;
background-color: white;
border-radius: 50%;
position: absolute;
left: 63%;
top: 0;
height: 200%;
aspect-ratio: 1/1.5;
z-index: 1;
margin: 0;
padding: 0;
}<div class="cutout"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396366.html