Animating CSS width without the squish | Rik Schennink

An interestingly regressive technique for expanding the size of a rectangle with rounded corners in CSS that protects the corners themselves from deforming, all by using transform.

Let’s apply this to our square. It will mean we need one container and three child elements to represent the square left (1), center (2), and right (3) parts.

Explore Other Notes

Older ➡

The free market is elusive

...when the web was young, the free market in ideas was open to anyone with access to a library’s internet connection.But the web rewards network effects and network effects …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>An interestingly regressive technique for expanding the size of a rectangle with rounded corners in CSS that protects the corners themselves from deforming, all by using …</p> </body> </html>
  • Murray Adcock.
Journal permalink