Float an Element to the Bottom Corner

Temani Afif shares this clever trick to float an element to the bottom corner of a container.

The solution is threefold:

  1. Float a full-height wrapper (which contains the image) to the right
  2. Use flexbox to place the image at the bottom inside that wrapper
  3. Use shape-outside to clip the wrapper

Clever!

Float an Element to the Bottom Corner →

☝️ Did you know that to resize the container in the pen above, only one line of CSS is needed?!