css网页画一朵樱花花 |网页自适应 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%;
}

好的，现在大家的花瓣已经创建好了，让大家把它们放在容器中，添加下面的代码：

大家的樱花花已经创建好了，来看看最终的效果！