我想在 CSS/SASS 中創建一個空的半圓，這是我的半圓代碼片段，這是輸出：
.half-circle{
width: 60px;
height: 120px;
border-radius: 60px 0 0 60px;
background: #15DEA5;
}<body>
<div class ="half-circle"></div>
</body>但我想從內部“清空”它，這是我想要實作的結果的截圖：
那么是否可以在 CSS 中創建一個空的半圓？
uj5u.com熱心網友回復：
.half-circle {
width: 60px;
height: 120px;
border-top-left-radius: 110px;
border-bottom-left-radius: 110px;
border: 10px solid gray;
border-right: 0;
}
HTML：
<body>
<div class ="half-circle"></div>
</body>
演示：https ://jsfiddle.net/0zk8euj9/
uj5u.com熱心網友回復：
.circle {
--height: 200px;
--width: calc(var(--height) / 2);
width: var(--width);
height: var(--height);
border: 10px solid blue;
border-top-left-radius: calc(var(--width) * 1.5);
border-bottom-left-radius: calc(var(--width) * 1.5);
border-right: 0;
}
密碼筆
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/425043.html