如何使用HTML / CSS表绘制心脏？

Question

我想画心：

使用HTML表的第n个子属性，但无法弄清楚如何执行此操作：Codepen

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

Answer 1

如果您真的只想使用'nth-child'，请使用以下内容：

第一行：

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

所以，在你的表中，第一个tr后跟第三个和第五个td应该有红色背景。对以下所有行应用相同的逻辑。

对于第二行，您也可以使用nth-last-child：

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

然后整个解决方案就像这样：

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

如果您正在寻找描述心形的公式，那么您可以从这里开始，例如： http://mathworld.wolfram.com/HeartCurve.html

但是我认为实现这样的公式超出了CSS的范围。

Answer 2

你可以使用盒子阴影！

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;