вход

Фигуры CSS

Фигуры CSS

Сегодня технология CSS позволяет создавать все более гибкие вещи. CSS3 с успехом заменяет использование графики при оформлении страниц, значительно упрощая и облегчая сам код веб страницы. Сегодня с помощью CSS можно создавать не только реалистичные градиенты, тени, заливки и т.д. но и создавать различные фигуры. Большинство приведённых ниже кодов используют возможности CSS3, поэтому будут работать на последних браузерах. Отличительной особенностью создания таких фигур является то, что вы используете всего один тег HTML. Назначив ему тот или иной класс, вы легко переключаете форму создаваемой фигуры.

Квадрат

 
#square {
	width: 100px;
	height: 100px;
	background: red;
}
					

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

 
#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}
					

Круг

 
#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
					

Овал

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

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

 
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}
					

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

 
#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}				
					

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

 
#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid red;
	border-bottom: 50px solid transparent;
}
					

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

 
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}		
					

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

 
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-right: 100px solid transparent;			
}
					

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

 
#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-left: 100px solid transparent;
	
}		
				

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

 
#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-right: 100px solid transparent;	
}		
					

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

 
#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-left: 100px solid transparent;
}				
					

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

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

Трапеция

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

Звезда (6 конечная)

 
#star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
	position: relative;
}
#star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
	position: absolute;
	content: "";
	top: 30px;
	left: -50px;
}
					

Звезда (5 конечная)

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

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

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

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

 
#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	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 red;
}
#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 red;
}
					

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

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

Сердце

 
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -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%;
}				
					

Бесконечность

 
#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
 
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         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);
}			
					

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
9 комментариев

Статья → Фигуры CSS

  1. Вау….сердце и бесконечность – это реально круто…не думал, что через CSS такое можно реализовать

  2. Да… это великолепно! Правда смысла я не вижу:)

  3. Согласен с Евгением: интересно, занятно, только – зачем? Конечно, такой код весит меньше, чем gif-ка, но эти картинки сами по себе не очень уж… Картинки-то красивее :)

  4. А кстати треугольнички я буду использовать для ul li
    Спасибо.

  5. офигеть!! надо куда-нить это прикрутить

  6. Егор:

    Очень даже полезная вещь, например, для 3D панорамы в виде куба на JQuery, спасибо автору

  7. 27 примеров иконок на CSS3
    http://www.1stwebdesigner.com/css/css-icons-logos/

    Особенно понравился вот этот пост:
    http://lucianmarin.com/peculiar/

  8. Прикольно! ща попробую. некогда подобного не видел, да че не видел даже не думал о подобном

  9. Скажите, а кроме файла CSS ничего править не нужно? Регистрировать переменную и т.д… В CSS пока новичок.

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

Статья → Фигуры CSS

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.