“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.