CSS 是網頁設計中必不可少的一部分。今天我們要學習的是如何把一個圓平分為兩等份。
首先,我們需要先創建一個圓。可以使用圓的 border-radius 屬性,將一個 div 元素變成圓形。具體實現代碼如下:
.circle { border-radius: 50%; width: 200px; height: 200px; }
接下來,我們使用偽元素 ::before 和 ::after 來實現圓形的分割。具體實現代碼如下:
.circle::before { content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; width: 100%; height: 100%; background-color: blue; transform: rotate(180deg); } .circle::after { content: ""; position: absolute; top: 0; left: 0; border-radius: 50%; width: 100%; height: 100%; background-color: red; transform: rotate(180deg) scale(-1, 1); }
通過以上代碼,我們實現了將圓形分割成了兩等份,分別為藍色和紅色兩個部分。其中, ::before 偽元素是藍色分割線, ::after 偽元素則是將藍色分割線水平翻轉之后的紅色分割線。
以上就是如何使用 CSS 將圓形分割為兩等份。通過這個例子,我們也可以學到偽元素的使用方法以及 transform 屬性的使用技巧。
上一篇css把文字橫放