"Elements have four corners, but when we use border-radius, each corner is split into two coordinates. The x-axis coordinate moves along the x-axis, away from its associated corner, while the y-axis coordinate does the same thing along the y-axis. It's from these coordinates that border-radius draws the curvature of the rounded corners. First, store the coordinates as CSS variables. We'll need the values that they hold more than once, so this simplifies things, makes the fold animatable, and maintains some degree of realism. :root { /* x-axis coordinate */ --x-coord: 9rem; /* y-axis coordinate */ --y-coord: 5rem; }"
"Given what we now know about border-radius, it should be obvious what border-top-right-radius does. As for corner-top-right-shape: bevel, that ensures that a straight line is drawn between the coordinates instead of rounded corners ( corner-top-right-shape: round). That's right, border-radius includes corner-shape: round by default (behind the scenes, of course). /* Square */ div { /* Place coordinates */ border-top-right-radius: var(--x-coord) var(--y-coord); /* Draw line between coordinates */ corner-top-right-shape: bevel; }"
"Now that we've established the fold, it's time to create the flip side. Start by selec"
CSS corner-shape can generate folded-corner effects by reusing the same coordinate logic used by border-radius. CSS variables store the x and y coordinates so the fold geometry can be reused and animated consistently. A top-right corner is formed by setting border-top-right-radius to the stored coordinates and switching corner-top-right-shape to bevel so a straight edge is drawn between the coordinates instead of a rounded curve. The fold’s opposite face is then created by adding another corner-shape configuration that mirrors the first corner’s geometry, producing a realistic flipped appearance. Browsers without corner-shape fall back to rounded corners.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]