BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Создание геометрических фигур при помощи CSS

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

2016-12-14 / Вр:11:39 / просмотров: 4630

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

Всем привет!
А знаете ли вы, что в CSS можно создавать различные фигуры без использования картинок?
Сомневаетесь?
Зря!
В этой статье я покажу результат, которого можно достичь с помощью нескольких строк в CSS.

Пропишите в HTML вот такой код:

<div id="bloggood-ru"></div>

Вот теперь приступаем к опытам.

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

КВАДРАТ

#bloggood-ru
{
width: 100px;
height: 100px;
background: #7fee1d;
}

В результате:

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

ПРЯМОУГОЛЬНИК

#bloggood-ru
{
width: 170px;
height: 100px;
background: #7fee1d;
}

В результате:

 

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

КРУГ

#bloggood-ru
{
width: 100px;
height: 100px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
background: #7fee1d;
}

В результате:

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

ОВАЛ

#bloggood-ru
{
width: 100px;
height: 200px;
-webkit-border-radius: 50px / 100px;
-moz-border-radius: 50px / 100px;
border-radius: 50px / 100px;
background: #7fee1d;
}

В результате:

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

ТРЕУГОЛЬНИК

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 100px solid #7fee1d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

В результате:

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

ТРЕУГОЛЬНИК ПЕРЕВЕРНУТЫЙ ВНИЗ

#bloggood-ru
{
width: 0;
height: 0;
border-top: 100px solid #7fee1d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

В результате:

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

ТРЕУГОЛЬНИК РАЗВЕРНУТ ВЛЕВО

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid #7fee1d;
}

В результате:

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

ТРЕУГОЛЬНИК РАЗВЕРНУТ ВПРАВО

#bloggood-ru
{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid #7fee1d;
}

В результате:

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

РОМБ

#bloggood-ru
{
width: 100px;
height: 100px;
background: #7fee1d;
/* 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;
}

В результате:

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

ТРАПЕЦИЯ

#bloggood-ru
{
height: 0;
width: 120px;
border-bottom: 120px solid #7fee1d;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

В результате:

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

ПАРАЛЛЕЛОГРАММ

#bloggood-ru
{
width: 100px;
height: 60px;
background:#7fee1d;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}

В результате:

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

ЗВЕЗДА

#bloggood-ru
{
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);
}
#bloggood-ru: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);
}
#bloggood-ru: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);
}

В результате:

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

ШЕСТИУГОЛЬНАЯ ЗВЕЗДА

#bloggood-ru
{
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;
}
#bloggood-ru: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;
}

В результате:

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

ПЯТИУГОЛЬНИК

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

В результате:

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

ШЕСТИУГОЛЬНИК

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

В результате:

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

СЕРДЦЕ

#bloggood-ru
{
position: relative;
}
#bloggood-ru:before,#bloggood-ru: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%;
}
#bloggood-ru: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%;
}

В результате:

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

ОБЛАКО КОММЕНТАРИЯ

#bloggood-ru
{
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#bloggood-ru: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;
}

В результате:

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

PACMAN

#bloggood-ru
{
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;
}

В результате:

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

 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Елена

    :smile: Классно!

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716