CSS: Float an Element to the Bottom Corner

Leave a comment on CSS: 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?!

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.