CSS Heart

Just in time for Valentines Day I bring you the CSS Heart. Give it to your lover or your friend or just throw it up on your website to show the world how cool you are.

View an example of the CSS Heart here!

There is really nothing to this, I had just finished lunch with some good friends and thought how simple it would be to create a CSS Heart. So here goes:

We start by laying down the divs

<div class="heart">
<div class="topheart"></div>
<div class="topheart"></div>
<div class="botheart"></div>
</div>

Simple enough, now the style

.heart{
width: 202px;
margin: 0 auto;
}

.topheart{
border-bottom: 50px solid #FFCCFF;
border-top: 50px solid #ffffff;
border-left: 50px solid #ffffff;
border-right: 50px solid #ffffff;
width: 1px;
float: left;
}

.botheart{
border-top: 100px solid #FFCCFF;
border-right: 100px solid #FFFFFF;
border-bottom: 100px solid #FFFFFF;
border-left: 100px solid #FFFFFF;
clear: both;
width: 1px;
}

Lets break it down.  The heart has three sections (the two top parts and the bottom part), and a container around it to hold it all together.

Now the style, it’s really not that hard once you take a look at it.  We’ll start with the top parts.  We are adding a pink border on the bottom and white borders everywhere else.  I made the border 50px and the width of the whole div 1px.  You can actually make the border any size you want, but the width needs to stay at 1px so you have a nice sharp point.  Then I float it to the left so they line up nicely.

The bottom part is not much different.  Because we are matching it up with the top parts, I just doubled the border size to get the 100px.  The main difference is we are adding the color to the top border, instead of the bottom border.  I also want this piece to drop below the top parts so I cleared the floats.  Finally, we want to keep that sharp point so we give it a 1px width.

Here is the only part where you have to think a little.  I wanted my heart to float in the middle of the page so I had to give it a width so the margin:0 auto; would work.  How can we find the with?  With magic math!

We know the height of one of the top triangles is 50px.  So if we cut an imaginary line right down the middle of the triangle we have a 50px side.  This is a perfect right triangle so it must have another 50px side on the bottom as well.  So if the bottom of one half of one of our top pieces is 50px, we know the whole width should be 200px.

WOW! Math is magic. But wait, where did those extra 2px come from?  We added a 1px width to our divs, and 1 + 1 = 2, magic again!  That is how we come up with our 202px width.

Well, now you have a custom Valentines Day CSS Heart to do whatever you want with, and the knowledge to create other wonderful things in CSS with a 45° angles.

UPDATE!!

In Firefox you can add a little CSS flare to the CSS Heart by styling the borders a little.  Take a look at the heart-update source for the code, but as far as I can tell it will only work in Firefox 3.0.6.  In Chrome you get some nice arrows, and IE 7 doesn’t change.  If you can find other fun ways to style this, or a better way to do it all together (using only CSS) let me know!

UPDATE!! FEB 24, 2009

For some strange reason this popped into my head, but here is a more rounded version of the CSS Heart.  I added a middle <DIV> and more CSS, but it’s still VERY small!  Just take a look at the source to see the code.

Again, if anyone has any cool variations of the CSS Heart or their own CSS Art, post it up here or send me the code and I’ll post it, and yes you will get credit for your hard work!

Popularity: 2% [?]