Рисование куба с помощью CSS

2008-01-22 / Рубрика: 3D

С помощью бордеров (границ) можно делать потрясающие вещи. На примере изображён куб нарисованый исключительно бордерами.

CSS предоставляет возможность управлять свойствами границ для каждой стороны блока. Немного смекалки и терпения и псевдо-куб готов.

А как вы нестандартно используете стили границ?

.cubedraw {
line-height:0px;
width:0px;
height:0px;
margin: 0px;
font-size: 0px;
border-style:solid;
}
 
.c1 {
border-color: white white blue white;
border-width: 0px 60px 45px 60px;
}
 
.c2 {
border-color: blue lime white red;
border-width: 45px 60px 0px 60px;
}
 
.c3 {
border-color: white lime white red;
border-width: 0px 60px 0px 60px;
height: 20px;
}
 
.c4 {
border-color: white red white white;
border-width: 0px 60px 45px 0px;
float: left;
}
 
.c5 {
border-color: white white white lime;
border-width: 0px 0px 45px 60px;
float: left;
}

<div id="cubecontainer">
	<div class="cubedraw c1"></div>
	<div class="cubedraw c2"></div>
	<div class="cubedraw c3"></div>
	<div class="cubedraw c4"></div>
	<div class="cubedraw c5"></div>
</div>

Дата написания — 2001-01-22

Перевод —Владимир Полухин