如何使用HTML/CSS表绘制心脏？
如何使用HTML/CSS表绘制心脏？
提问于 2016-10-04 09:39:00
我试着吸引人心：
使用HTML的nth-子属性，但无法知道如何实现：科德芬
table tr td:nth-child(n+3):nth-child(-n+7) {
background-color: red;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-10-04 09:49:09
如果您真的只想使用'nth-child‘，那么使用以下命令：
第一行：
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个子行：
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的范围。
Stack Overflow用户
发布于 2016-10-04 09:46:51
你可以用黑影！
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39848971
复制相关文章
相似问题
腾讯云开发者
