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>
