三分之一圓是一種常用的CSS效果，通常用于制作進度條、圓形圖表等。下面我們來學習一下如何通過CSS實現三分之一圓。

.round {
width: 100px;  /* 圓的直徑 */
height: 50px;  /* 圓的高度 */
border-radius: 100px 100px 0 0;  /* 通過border-radius屬性設置圓角，前兩個參數控制左上角、右上角的圓角大小，后兩個參數控制左下角、右下角的圓角大小 */
transform: rotate(-45deg);  /* 通過transform屬性設置元素的旋轉角度 */
}

代碼中的.round類可以應用于任何HTML元素，如div、span等。其中的width和height屬性控制圓的大小，可以根據需要進行調整。border-radius屬性則是關鍵，通過指定不同的參數值，可以實現各種不同形狀的圓角。此處我們指定前兩個參數為100px，后兩個參數為0，即左上角和右上角是完整的圓角，左下角和右下角沒有圓角。

接著，我們再使用transform屬性來將元素旋轉-45度，這樣就可以得到三分之一圓的效果了。具體來說，我們可以先將圓按照默認的水平方向旋轉45度，然后再沿著當前方向旋轉-45度，這樣就得到了一個三分之一圓的形狀。

最后，需要注意的是，在某些瀏覽器中，可以使用-webkit-border-radius等私有前綴來兼容不同版本的瀏覽器。