Создание геометрических фигур при помощи CSS

13 марта 2013 | Автор: seogrot | Категория: Уроки вёрстки

При помощи каскадные таблиц стилей (CSS) можно не только выравнивать блоки на странице, изменять цвет, фон, скрывать или отображать элементы на странице, но и “рисовать” геометрические фигуры.

Десять самых распространённых геометрических фигур созданные средствами CSS:

1. Квадрат

#square {
    width: 150px;
    height: 150px;
    background-color: #00B2FF;
}

2. Прямоугольник

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #00B2FF;
}

3. Окружность

#circle {
    width: 200px;
    height: 200px;
    background-color: #00B2FF;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    }

4. Эллипс

#ellips {
    width: 196px;
    height: 100px;
    background-color: #00B2FF;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    }

5. Треугольник

#triangle {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #00B2FF;
    }

6. Трапеция

#trapezoid {
    border-bottom: 100px solid #00B2FF;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

7. Параллелограмм

#parallelogram {
    margin-left: 20px;
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: #00B2FF;
}

8. Ромб

#romb {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 150px solid #00B2FF;
    position: relative;
}
#romb:after {
    width: 0;
    height: 0;
    top: 150px;
    left: -100px;
    position: absolute;
    content: "";
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 150px solid #00B2FF;
}

9. Пятиугольник

Пятиугольник

#pentagon { 
margin-top: 35px;
position: relative; 
width: 84px; 
border-width: 50px 18px 0; 
border-style: solid; 
border-color:  #00B2FF transparent; 
} 
#pentagon:before { 
content: ""; position: absolute; 
height: 0; 
width: 0; 
top: -100px; 
left: -18px; 
border-width: 0 60px 50px; 
border-style: solid; 
border-color: transparent transparent  #00B2FF;
}

10. Шестиугольник

Шестиугольник

#hexagon { 
margin-top: 25px;
width: 100px; 
height: 55px; 
background: #00B2FF;
position: relative; 
} 
#hexagon:before { 
content: ""; 
position: absolute; 
top: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 25px solid #00B2FF;
}
#hexagon:after { 
content: ""; 
position: absolute; 
bottom: -25px; 
left: 0; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid #00B2FF;
}

Чтобы вывести фигуру на странице достаточно присвоить элементу <div> соответствующий id, например:

<div id="circle"></div>

или

<div id="romb"></div>

Кроме того, средствами CSS можно создать звезду, сердце, знак бесконечности и многое другое. Здесь можно посмотреть примеры. Единственный минус, что пока не все браузеры поддерживают необходимые для отображения функции, но думаю это вопрос времени.

Метки: css стили

Создание геометрических фигур при помощи CSS

Комментарии к "Создание геометрических фигур при помощи CSS"

Добавить комментарий Отменить ответ

Категории:

Архив