今天我們來學習如何用CSS制作一朵漂亮的櫻花花！

.petal {
width: 20px;
height: 40px;
border-radius: 50% 50% 0 0;
background-color: pink;
position: absolute;
bottom: 0;
}
.petal.left {
transform: rotate(-40deg) skew(10deg) translateX(7px);
}
.petal.right {
transform: rotate(40deg) skew(-10deg) translateX(-7px);
}

首先，我們需要用一個DIV元素作為花朵的容器，如下：

接下來，我們需要用CSS創建5個花瓣，我們將使用absolute定位，下面是樣式代碼：

.cherry-blossom .petal:nth-child(1) {
left: 50%;
transform-origin: 100% 0;
}
.cherry-blossom .petal:nth-child(2) {
left: 44%;
}
.cherry-blossom .petal:nth-child(3) {
left: 56%;
}
.cherry-blossom .petal:nth-child(4) {
left: 38%;
}
.cherry-blossom .petal:nth-child(5) {
left: 62%;
}

好的，現在我們的花瓣已經創建好了，讓我們把它們放在容器中，添加下面的代碼：

我們的櫻花花已經創建好了，來看看最終的效果！