Показать сообщение отдельно
  #2 (permalink)  
Старый 09.07.2020, 01:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

sanderleik,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body{
    display:  grid;
    grid-template-columns: repeat(44, 8px);
    grid-template-rows:repeat(44, 8px);
    grid-gap: 0;
}
div{

    background-color: hsla(315, 100%, 40%, 1);
    margin: 0;
    border: 1px solid hsla(0, 0%, 0%, 1);
    box-sizing: border-box;
}
div.o{
    background-color: hsla(180, 100%, 70%, 1);
}


</style>
</head>
<body>
<script>
var length = 44;
for (var i = 0; i < length; i++) {
for (var k = 0; k < length; k++) {
document.write(`<div class='${((k + i) < length && (k < i|| k >= length/2) ) ? 'p' : 'o'}'></div>` )
}

}
</script>
</body>
</html>
Ответить с цитированием