如何用HTML/CSStable画心?
How to draw heart using HTML/CSS table?
我正在努力画心:
使用 HTML table 的 nth-child 属性,但不知道该怎么做:Codepen
table tr td:nth-child(n+3):nth-child(-n+7) {
background-color: red;
}
你可以使用方框阴影!
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>
如果你真的只想使用 'nth-child' 然后使用下面的:
第一行:
table tr:nth-child(1) td:nth-child(3),
table tr:nth-child(1) td:nth-child(5) {
background-color:red;
}
因此,在您的 table 中,第一个 tr 之后是第 3 个和第 5 个 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 的范围。
我正在努力画心:
使用 HTML table 的 nth-child 属性,但不知道该怎么做:Codepen
table tr td:nth-child(n+3):nth-child(-n+7) {
background-color: red;
}
你可以使用方框阴影!
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>
如果你真的只想使用 'nth-child' 然后使用下面的:
第一行:
table tr:nth-child(1) td:nth-child(3),
table tr:nth-child(1) td:nth-child(5) {
background-color:red;
}
因此,在您的 table 中,第一个 tr 之后是第 3 个和第 5 个 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 的范围。