Javascript-форум - Размещение елементов в 'DIV'.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Размещение елементов в 'DIV'. (https://javascript.ru/forum/dom-window/17940-razmeshhenie-elementov-v-%27div%27.html)

Размещение елементов в 'DIV'.

Написал простой ColorPicker :write: , который отображаеться в форме квадрата 10х10. При исполнении кода генерируються buttons і помещяються в 'div' по 10 кнопок на 1 дивку.

---
for(var i=0;i<=10;++i) {
if(0 == i%1, ++i) {
var div = document.createElement("div");
div.style.clear = "both";
parent.appendChild(div);
}

var btn = new Button();
btn.render(parent);
---
Теперь хочу чтобы кнопки отображались в виде ромба, а не квадрата, но не знаю как :(

Цитата:

Сообщение от cinedd

хочу чтобы кнопки отображались в виде ромба

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
.box {
	float: left;
	width: 10px;
	height: 10px;
}
.on {
	background-color: red;
}
.end {
	clear: both;
}
</style>
<script>
function Go() {
	var oc=document.getElementById('container')
	var n=17
	var k=0
	var inc=1
	var nk=Math.floor(n/2)
	var i,j,o
	for (i=0; i<n; i++) {
		for (j=0; j<n; j++) {
			o=document.createElement("div")
			o.className=(Math.abs(nk-j))>k? 'box': 'box on'
			oc.appendChild(o)
		}
		o=document.createElement("div")
		o.className='end'
		oc.appendChild(o)
		k=k+inc
		if ((k+1)>nk) inc=-1
	}
}
</script>
</head>
<body onload='Go()'>
<div id='container'></div>
</body>
</html>