Monthly Archives: January 2016

Make a CSS Heart to be a Certain Width

See the Pen Pulsing Heart – CSS Animation by Lisa Folkerson (@lisafolkerson) on CodePen.


When making a CSS heart to be a certain size (like you need it to be 245px wide as in this case) measure with a square to find the sides of a square that will fit in each dimension and then get the width/left position and height/border-radius for the two divs that make each half of the heart. Mutiply the length of one side by the square root of 2 to get the values to use. So here:

width/left position:
square root of 2 times 107 = 151.320851174

height/border-radius:
square root of 2 times 175 = 247.487373415