“This is the fourth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

To the Spring Festival, send you a peach 🍑, as to say why is green, that is to hope that we have young energy and happiness, infinite youth, infinite vitality.

Young peach

We can implement it with a single div element, but there are some problems along the way, which I’ll cover later. A green peach has two parts: the peach and the leaf.

peach

The planned peach width and height is: 1:1, because it is green 🍑, all to give a gradual change, the code implementation is as follows:

.peach {
    --w: 10rem;
    width: var(--w);
    height: var(--w);
    background-image: linear-gradient(to right top, #8fa688 25%.#ed3e40);
    border-radius: 50% 0% 50% 70%;
    transform: rotate(-45deg);
    box-shadow: 0 0 10px 0 #fff inset, -5px 5px 10px #b9a7a7;
    position: relative;
}
Copy the code

leaves

The width of the leaf is half that of the peach. The width to height ratio of the leaf is set as: 2:1. The code is implemented as follows:

.peach::after {
    content: ' ';
    position: absolute;
    width: 50%;
    height: 25%;
    background-color: #77bb70;
    border-radius: 50%;
    bottom: 10%;
    left: -5%;
    z-index: -1;
    transform-origin: 100% center;
    box-shadow: 0 var(--b) calc(var(--w) * 0.025) # 646363;
}
.peach::before{-b: calc(var(--w) * 0.025);
    transform: translate(-50%) rotate(30deg);
}
.peach::after{-b: calc(var(--w) * -0.025);
    transform: translate(-50%) rotate(-120deg);
}
Copy the code

At this point we can see that using z-index: -1, the pseudo-element layer will be underneath the peach, as follows:

🤫 requires our attention. If div, also known as opacity element, uses transform or opacity layer, z-index: -1 of opacity element has no effect on opacity layer, but it does not affect the hierarchical comparison between two opacity elements.

Pay attention to

If a div uses transform or opacity, the z-index of its pseudo-element will not function. For example, if a rotation is given to peach 🍑, the following situation will occur:

conclusion

Element setting the transform or opacity property creates a new stacking context, which translates as an area of the cascading context. At this point, the cascade rule changes and the new region is at the bottom, which only affects the child elements, but not the sibling elements.

If we want a square peach (like the cover image), we need to wrap the current element in a layer and then rotate it.