How to draw heart using HTML/CSS table?

Question

I'm trying to draw heart:

using HTML table's nth-child property, but can't figure out how to do it: Codepen

table tr td:nth-child(n+3):nth-child(-n+7) {
    background-color: red;
}

Aston · Accepted Answer · 2016-10-04 10:05:28Z

5

If you really only want to use the 'nth-child' then use the following:

First row:

table tr:nth-child(1) td:nth-child(3),
table tr:nth-child(1) td:nth-child(5) {
  background-color:red;
}

So, in your table, the first tr followed by the 3rd and 5th td should have red background. Apply the same logic for all the following rows.

For the second row you could use the nth-last-child too:

table tr:nth-child(2) td:nth-child(n+2):nth-last-child(n+4) {
  background-color:red;
}

The whole solution then comes out like this:

table tr:nth-child(2) td:nth-child(4),
table tr:nth-child(2) td:nth-child(6),
table tr:nth-child(3) td:nth-child(n+3):nth-last-child(n+3),
table tr:nth-child(4) td:nth-child(n+3):nth-last-child(n+3),
table tr:nth-child(5) td:nth-child(n+4):nth-last-child(n+4),
table tr:nth-child(6) td:nth-child(n+5):nth-last-child(n+5) {
  background-color:red;
}

If you were looking for a formula that describes a heart shape, then you could start here for example: http://mathworld.wolfram.com/HeartCurve.html

But implementing such a formula is out of scope of CSS I think.

edited Oct 4, 2016 at 10:05

answered Oct 4, 2016 at 9:49

Aston

3,7321 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex D. Over a year ago

thanks, followed you instructions, and got this result: codepen.io/anon/pen/yaPpQB

Aston Over a year ago

You can also write it up as only one CSS rule, like how I updated it in my answer.

jbutler483 · Accepted Answer · 2016-10-04 09:46:51Z

4

you could use box shadows!

div{
  height:200px;width:200px;
  background:lightgray;
  position:relative;  
  }
div:before{
  content:"";
  position:absolute;top:left:0;height:40px;width:40px;
  background:transparent;
  box-shadow:
    
    40px 0 tomato,                                     120px 0 tomato,
    0 40px tomato, 40px 40px tomato, 80px 40px tomato, 120px 40px tomato,160px 40px tomato,
    
    0 80px tomato, 40px 80px tomato, 80px 80px tomato, 120px 80px tomato,160px 80px tomato,
    
    
    
                   40px 120px tomato, 80px 120px tomato, 120px 120px tomato,
                          80px 160px tomato
    
  ;
  }

<div></div>

answered Oct 4, 2016 at 9:46

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

2 Comments

Alex D. Over a year ago

thanks for your answer, but I need only HTML table's nth-child property

Phillip Senn Over a year ago

tomato tomato tomato tomato

Collectives™ on Stack Overflow

How to draw heart using HTML/CSS table?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related