CSS實(shí)現(xiàn)小弧度效果

.arc {
width: 300px;
height: 150px;
border-radius: 50% / 100%;
background-color: #f2f2f2;
position: relative;
}
.arc::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 50% / 100%;
background-color: #ff9900;
transform: skew(35deg) translateX(25px);
z-index: -1;
}

上述代碼可以實(shí)現(xiàn)一個(gè)小弧度效果。

首先，我們創(chuàng)建一個(gè)類(lèi)名為arc的div元素，設(shè)置它的寬度和高度，以及圓形的邊框半徑。接著，我們?cè)O(shè)置它的背景顏色和對(duì)其進(jìn)行定位。

為了實(shí)現(xiàn)小弧度效果，我們需要使用偽元素::before，將其設(shè)置為絕對(duì)定位。然后，我們將其放置在原始元素的左下角，為了避免z-index的影響，我們將其z-index設(shè)置為-1。

我們?cè)O(shè)置偽元素的高度，寬度為100%，并為其設(shè)置圓形邊框半徑。接下來(lái)，我們將元素進(jìn)行斜切（skew），將其傾斜一定角度，再沿著X軸向右移動(dòng)（translateX），使其呈現(xiàn)小弧度的效果。

最后，我們將偽元素的背景顏色設(shè)置為橙色，以使它看起來(lái)更加醒目。