在CSS中，我們可以利用border-radius屬性來畫出圓形及其變種。在本文中，我們將會學習如何使用border-radius屬性來畫出四分之一同心圓。

.quarter-circle {
width: 100px;
height: 100px;
border-radius: 0 0 100px 0;
background-color: red;
}
.second-circle {
width: 80px;
height: 80px;
border-radius: 0 0 80px 0;
background-color: white;
margin: 10px;
}
.third-circle {
width: 60px;
height: 60px;
border-radius: 0 0 60px 0;
background-color: red;
margin: 10px;
}

首先，我們先畫出一個紅色的四分之一圓形，即只有右下角是圓弧的圓形。這可以通過設置border-radius屬性的值來實現(xiàn)，其中第三個值表示右下角的弧度大小。在本例中，由于我們需要畫出四分之一同心圓，所以使用值100px。

接下來，我們需要畫出內(nèi)部的兩個白色和紅色的同心圓。為了實現(xiàn)居中且同心的效果，我們可以利用margin屬性來調(diào)整兩個圓形的位置。同時，border-radius屬性的第三個值也要依次減小，實現(xiàn)內(nèi)部圓形的縮小效果。

通過以上步驟，我們成功地實現(xiàn)了四分之一同心圓的繪制效果。