| Olegan | Дата: Среда, 11.04.2012, 23:50 | Сообщение # 1 |
|
| В данной публикации, хочу показать, как можно используя только один DIV элемент, создавать геометрические фигуры при помощи CSS.
Квадрат
/* Квадрат */
#square {
width: 100px;
height: 100px;
background: #FF0000;
}
Прямоугольник
/* Прямоугольник */
#rectangle {
width: 200px;
height: 100px;
background: #FF0000;
}
Параллелограмм
/* Параллелограмм */
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
background: #FF0000;
}
Трапеция
/* Трапеция */
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);
background: #FF0000;
}
Круг
/* Круг */
#circle {
width: 100px;
height: 100px;
background: #FF0000;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
}
Овал
/* Овал */
#ellipse {
width: 200px;
height: 100px;
background: #FF0000;
border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
-khtml-border-radius: 100px / 50px;
}
Треугольник верх
/* Треугольник верх */
#triangle-up {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #FF0000;
}
Треугольник низ
/* Треугольник низ */
#triangle-down {
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #FF0000;
}
Треугольник лево
/* Треугольник лево */
#triangle-left {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 100px solid #FF0000;
border-bottom: 50px solid transparent;
}
Треугольник право
/* Треугольник право */
#triangle-right {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 100px solid #FF0000;
border-bottom: 50px solid transparent;
}
Треугольник верхний левый угол
/* Треугольник верхний левый угол */
#triangle-topleft {
width: 0px;
height: 0px;
border-top: 100px solid #FF0000;
border-right: 100px solid transparent;
}
Треугольник верхний правый угол
/* Треугольник верхний правый угол */
#triangle-topright {
width: 0px;
height: 0px;
border-top: 100px solid #FF0000;
border-left: 100px solid transparent;
}
Треугольник нижний левый угол
/* Треугольник нижний левый угол */
#triangle-bottomleft {
width: 0px;
height: 0px;
border-bottom: 100px solid #FF0000;
border-right: 100px solid transparent;
}
Треугольник нижний правый угол
/* Треугольник нижний правый угол */
#triangle-bottomright {
width: 0px;
height: 0px;
border-bottom: 100px solid #FF0000;
border-left: 100px solid transparent;
}
|
| |
| |
