Я пытаюсь нарисовать сердце:Как нарисовать сердце, используя таблицу HTML/CSS?
используя свойство п-го ребенка HTML таблицы, но не могу понять, как это сделать: Codepen
table tr td:nth-child(n+3):nth-child(-n+7) {
background-color: red;
}
Я пытаюсь нарисовать сердце:Как нарисовать сердце, используя таблицу HTML/CSS?
используя свойство п-го ребенка HTML таблицы, но не могу понять, как это сделать: Codepen
table tr td:nth-child(n+3):nth-child(-n+7) {
background-color: red;
}
Если вы действительно хотите использовать только в 'п-го ребенка', то используйте следующую команду:
Первая строка:
table tr:nth-child(1) td:nth-child(3),
table tr:nth-child(1) td:nth-child(5) {
background-color:red;
}
Таким образом, в таблицу , первый tr, за которым следует 3-й и 5-й тд, должен иметь красный фон. Примените ту же логику для всех следующих строк.
Для второго ряда можно использовать п-е-последний-ребенок тоже:
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. Я думаю ,
вы можете использовать окно тени!
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>
спасибо за ваш ответ, но мне нужно только HTML таблица п-й детской собственности –
томатного помидор томат томат –
@PhillipSenn, который не любит хорошую томатная – jbutler483
спасибо, за вами инструкцию, и получил следующий результат: HTTP: // codepen.io/anon/pen/yaPpQB –
Вы также можете написать это как только одно правило CSS, например, как я обновил его в своем ответе. – Aston