Вверх страницы

Главнаястраницу

Вниз страницы

BLOGTOP

Меню навигации

Пользовательские ссылки

Активные темы

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Создание различных геометрических фигур при помощи CSS

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

Страница: 1

Ответить

Сообщений 1 страница 1 из 1

Поделиться12022-05-22 12:59:23

Автор: МАЧОнаДАЧЕ
Владелец "BT"
Откуда: Новокузнецк
Зарегистрирован: 2022-03-17
Приглашений: 0
Сообщений: 786
Уважение: [+56/-1]
Позитив: [+34/-3]
Пол: Мужской
Возраст: 41 [1983-02-26]
Провел на форуме:
17 дней 19 часов
Голосовые уведомления:
https://dl.dropboxusercontent.com/s/6xj5hs016td5dci/pelevin-otryvok.mp3

Одной из интереснейших функций CSS3 является то, что CSS3 позволяет уменьшить использование изображений в веб-дизайне и создавать различные геометричекие фигуры при помощи CSS. Простейшие формы, которые раньше рисовали в Photoshop или Illustrator сейчас можно сделать при помощи CSS3.

ИТАК, ДАВАЙТЕ ПОПРОБУЕМ СОЗДАТЬ ПРОСТОЙ НАБОР НАИБОЛЕЕ РАСПРОСТРАНЕННЫХ ФОРМ, КОТОРЫЕ МОЖНО СДЕЛАТЬ С ПОМОЩЬЮ CSS3.

Круг

HTML:
Чтобы создать круг в CSS, нам нужен всего лишь один DIV. В нашем примере мы еще указали для него ID, чтобы определить для него стили.

Код:

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

CSS:
CSS очень простой, указываем ширину и высоту, а затем задаем ему border-radius равный половине ширины и высоты.

Код:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Квадрат

HTML:
Чтобы создать квадрат в CSS, нам так же, как и для круга, нужен один DIV с идентификатором.

Код:

<div id="square"> </div>

CSS:
CSS в данном случае еще проще, просто указываем равную ширину и высоту.

Код:

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

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

HTML:
Чтобы создать прямоугольную форму CSS, всё делаем почти также как при создании квадрата. Это самые простые фигуры и ни у кого не должно возникнуть сложностей.

Код:

<div id="rectangle"> </div>

CSS:
В CSS указываем ширину больше высоты.

Код:

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Овал

HTML:
Чтобы создать овал в CSS, создайте DIV с идентификатором, например, oval.

Код:

<div id="oval"> </div>

CSS:
Овал создается почти аналогично как и форма круга. Однако, овал имеет продолговатую форму, поэтому необходимо указать ширину больше чем высоту и радиус, равный половине высоты и ширины.

Код:

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Треугольник

HTML:
Для того чтобы создать треугольник в CSS, опять достаточно одного DIV-а.

Код:

<div id="triangle"> </div>

CSS:
Чтобы создать треугольник будем изменять ширину границы блока. Изменение ширины границы позволит Вам создавать различные углы наклона.

Код:

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Треугольник вниз

HTML:
Чтобы создать форму перевернутого треугольника с помощью CSS, создать опять DIV с идентификатором triangle_down.

Код:

<div id="triangle_down"> </div>

CSS:
Чтобы создать перевернутый треугольник, мы должны указать верхнюю, левую и правую границы блока.

Код:

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Треугольник влево

HTML:
Чтобы создать форму треугольника, которая обращена влево, создадим DIV с идентификатором triangle_left.

Код:

<div id="triangle_left"> </div>

CSS:
Для создания треугольника, который "смотрит" влево, определим границы с правой стороны, сверху и снизу.

Код:

 #triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

Треугольник вправо

HTML:
Код такой же, как и для предыдущих примеров, только со своим идентификатором.

Код:

<div id="triangle_right"> </div>

CSS:
Теперь определим границы с левой стороны, сверху и снизу.

Код:

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

Ромб

HTML:
Всё тот же простой HTML-код.

Код:

<div id="diamond"> </div>

CSS:
Создать ромб можно различными способами. Использование свойства transform с определенным значением rotate, позволит отобразить два треугольника рядом друг с другом.

Код:

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
/* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

Трапеция

HTML:
Для того чтобы создать форму трапеции используя CSS, снова создайте DIV с идентификатором.

Код:

<div id="trapezium"> </div>

CSS:
Трапеция создается похожим образом, как и треугольних.

Код:

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

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

HTML:
Опять создадим пустой DIV.

Код:

<div id="parallelogram"> </div>

CSS:
Чтобы создать форму параллелограмма, нам необходимо настроить значение skew для свойства transform, чтобы повернуть элемент на 30 градусов.

Код:

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

Звезда

HTML:
Для того чтобы создать форму звезды с помощью CSS понадобится также один DIV.

Код:

<div id="star"> </div>

CSS:
Создание звездочки - это также манипуляция с границами блока и с использованием значения rotate свойства transform. См. код ниже.

Код:

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

Шестиугольная звезда

HTML:
Разметка для шестиугольной звезды ничем не отличается от предыдущих примеров, только укажем свой идентификатор.

Код:

<div id="star_six_points"> </div>

CSS:
В отличие от обычной звезды с пятью углами, мы создадм два набора форм, а затем объединим их в одну.

Код:

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}
#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

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

HTML:
HTML-код всё тот же.

Код:

<div id="pentagon"> </div>

CSS:
Пятиугольник будем состоять у нас из двух элементов. Сначала создадим форму трапеции, а затем добавим форму треугольника на вершину.

Код:

#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}
#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

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

HTML:
Создаем еще один DIV с идентификатором.

Код:

<div id="hexagon"> </div>

CSS:
Существуют различные способы создания шестиугольника. Один из способов практически идентичен созданию пятиугольника. Сначала создайте прямоугольную форму, а затем добавьте два треугольника сверху и снизу.

Код:

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

Восьмиугольник

HTML:
Создание восьмиугольника потребует также одного DIV-а.

Код:

<div id="octagon"> </div>

CSS:
Восьмиугольник создадим следющим способом. Сначала создадим две одинаковых трапеции, а затем добавим два треугольника с каждой стороны. Хотя есть и некоторые другие способы сделать восьмиугольник - это самый простой способ.

Код:

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}
#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}
#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

Сердце

HTML:
Для создания формы в виде сердца создадим DIV.

Код:

<div id="heart"> </div>

CSS:
Форму сердца сделать не легко, но это может быть реализовано путем вращения элементов под разными углами и изменения свойства transform-origin для того, чтобы изменить расположение трансформированных элементов.

Код:

#heart {
    position: relative;
}
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Яйцо

HTML:
Для того, чтобы создать фигуру в виде яйца нам также понадобиться один DIV.

Код:

<div id="egg"> </div>

CSS:
Яйцевидная форма практически совпадает с овальной формой, за исключением того, что высота немного выше, чем ширина и радиус необходимо тщательно подобрать, чтобы получить хороший результат.

Код:

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Символ бесконечности

Код:

HTML

:
Создаем снова пустой DIV.

Код:

<div id="infinity"> </div>

CSS:
Форма бесконечности может быть создана путем тщательного манипулирования размерами границы и установки углов круга.

Код:

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Облачко с коментарием

HTML:
Создаем DIV с ID comment_bubble.

Код:

<div id="comment_bubble"> </div>

CSS:
Облако с комментарием может быть создано путем создания прямоугольника с закругленными углами, и затем добавления треугольной формы с левой стороны.

Код:

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

Pacman

HTML:
Чтобы создать форму в виде Пакмана из известной игры, создадим также один DIV.

Код:

<div id="pacman"> </div>

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

Код:

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

[think=http://www.kolobok.us/smiles/standart/yu.gif] 😎 На этом пока ВСЁ[/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

Цитировать Сообщение 1

Ответить

Страница: 1

Вы здесь » BLOGTOP » Уголок wap мастера » CSS/HTML » Создание различных геометрических фигур при помощи CSS

создать форум бесплатно