CSS紅蘋果畫法

/*首先，我們需要創建一個div元素作為蘋果的容器*/
div {
width: 100px;
height: 100px;
border-radius: 50%; /*使用border-radius屬性創建圓形*/
background-color: red; /*使用background-color屬性設置顏色*/
}
/*現在我們為蘋果添加一個小莖桿*/
div:before {
content: ""; /*偽元素必須有content屬性*/
display: block; /*將偽元素設置為塊級元素，方便設置屬性*/
position: relative; /*將偽元素的定位屬性設置為相對，方便控制*/
left: 50%; /*將偽元素向左移動50%的容器寬度*/
top: -10px; /*將偽元素向上移動10像素*/
width: 0; 
height: 0;
border-style: solid; 
border-width: 0 7.5px 10px 7.5px; /*設置小三角形邊框的大小和形狀*/
border-color: transparent transparent green transparent; /*使用不同的顏色來模擬小三角形的形狀*/
transform: translateX(-50%); /*將偽元素向左移動50%的自身寬度*/
}

通過以上CSS樣式設置，我們成功地畫出了一個漂亮的紅蘋果！