在CSS中,帶缺口的半圓形可以通過border-radius屬性來實現(xiàn)。我們要實現(xiàn)的半圓形是類似于一個“月牙形”的形狀,其中“月牙形”的一側(cè)有一段缺口。
.moon{ width: 100px; height: 50px; position: relative; border-radius: 50px 50px 0 0; border-top: 50px solid #f6c; border-right: 50px solid transparent; border-left: 50px solid transparent; } .moon::before{ content: ""; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; border-radius: 50%; background-color: #fff; }
上述代碼中,我們首先通過設(shè)置width和height屬性來確定半圓形的大小。然后,通過設(shè)置border-radius屬性的不同值來創(chuàng)建半圓形。在這個例子中,border-radius的前兩個值設(shè)置為50px,表示左上角和右上角都是半徑為50px的圓角,而后兩個值設(shè)置為0,因為左下角和右下角不需要圓角。接下來,我們使用border屬性來設(shè)置圓形缺口部分的樣式。這里我們將border-top的寬度設(shè)置為50px,表示這是月牙形的一側(cè)。而border-left和border-right則被設(shè)置為透明,使其形成缺口。
最后,我們使用一個偽元素::before來添加圓形的白色部分。使用精確的top和left屬性將其放置在正確的位置,并使用border-radius將其設(shè)置為圓形。這將使其與底部的月牙形結(jié)合,形成一個帶缺口的半圓形。