HTML/CSSテーブルを使用して心を描く方法は？

Question

私は心を描くしようとしている：Codepen

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

Answer 1

あなたが本当に唯一の 'n番目の子' を使用したい場合は、以下を使用します。

最初の行：

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

だから、中にあなたのテーブルを最初のtrに続いて3番目と5番目のtdは赤い背景を持つ必要があります。次のすべての行に対して同じロジックを適用します。

あなたもn番目の最後-子を使用することができます2行目：あなたはその式を探していた場合は

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; 
} 

：

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

全体のソリューションは、このように出てきますたとえば、心臓の形状を記述すると、ここから開始できます： http://mathworld.wolfram.com/HeartCurve.html

しかし、このような式を実装することは、CSSの範囲外です。

Answer 2

あなたはボックスを使用することができます：HTMLテーブルのn番目の子プロパティを使用して、それを行う方法を見つけ出すことはできません

影！

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>