Фигуры сделанные при помощи CSS3 - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Полезные статьи


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


Фигуры сделанные при помощи CSS3

Делаем фигуры с помощью свойств CSS3




Свойства CSS3 дают возможность создавать различные фигуры и их применение может иметь разнообразное направление.Здесь главное понимать действие свойств которые помогают заменить изображения.Дополнительно это даёт более широкий взгляд на построение макетов шаблонов,которые в скором времени будут значительно отличатся от установленных стандартов.Вот несколько примеров применения свойств для построения геометрических фигур,для реализации свойств используем блочный элемент <div>.Если кому ещё не понятна работа свойств и их применение,можете воспользоваться формой комментариев материала,попробуем разобраться детальнее.




Проверяйте примеры в HTML редакторе


Квадрат

Самый простой элемент,указываем ширину и высоту элемента.


<style>
#dskvadrat {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div id="dskvadrat"></div>


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

Указываем ширину больше чем высоту.


<style>
#dsprugol {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<div id="dsprugol"></div>


Трапеция

Указываем высоту как ноль,указываем ширину элемента.Теперь свойствами углов сводим края от нижнего бордюра = установленной ширине к 50% высоте от ширины.


<style>
#dstrapecia {
height: 0;
width: 200px;
border-bottom: 200px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
<div id="dstrapecia"></div>


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

Устанавливаем ширину и высоту как у прямоугольника.Остаётся добавить свойство 2D трансфомации для наклона,сторона наклона пропорционально изменится при аналогичных отрицательных значениях.Добавляем префиксы для отстающих браузеров.


<style>
#dsparalellogramm {
width: 200px;
height: 100px;
background-color: red;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
</style>
<div id="dsparalellogramm"></div>


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

<style>
#dstreugolnikv {
width: 0;
height: 0;
border-bottom: 200px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
<div id="dstreugolnikv"></div>


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

<style>
#dstreugolnikn {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid red;
}
</style>
<div id="dstreugolnikn"></div>


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

<style>
#dstreugolnikl {
width: 0;
height: 0;
border-top: 100px solid transparent;border-right: 200px solid red;border-bottom: 100px solid transparent;}
</style>
<div id="dstreugolnikl"></div>


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

<style>
#dstreugolnikp {
width: 0;
height: 0;
border-top: 100px solid transparent;border-left: 200px solid red;border-bottom: 100px solid transparent;}
</style>
<div id="dstreugolnikp"></div>


Круг

Делаем ширину и высоту квадрата,а затем применяем свойство радиуса углов 50% от значения ширины\высоты.Для радиуса добавляем префиксы отстающим браузерам.


<style>
#dskrug {
width: 200px;
height: 200px;
background-color: red;
-o-border-radius: 100px;
-khtml-border-radius: 100px;
-icab-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
</style>
<div id="dskrug"></div>


Овал

Делаем ширину и высоту прямоугольника,а затем применяем свойство радиуса углов 50% от значения ширины\высоты.Для радиуса добавляем префиксы отстающим браузерам.


<style>
#dsoval {
width: 200px;
height: 100px;
background-color: red;
-o-border-radius: 100px/50px;
-khtml-border-radius: 100px/50px;
-icab-border-radius: 100px/50px;
-webkit-border-radius: 100px/50px;
border-radius: 100px/50px;
}</style>
<div id="dsoval"></div>


Яйцо

Делаем ширину и высоту прямоугольника,а затем применяем свойство радиуса углов 50% от значения ширины\высоты.Для радиуса добавляем префиксы отстающим браузерам.


<style>
#dsoval {
display:block;
width:200px;
height:120px;
background-color: red;
-o-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
-khtml-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
-icab-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
</style>
<div id="dsoval"></div>


Ромб

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


<style>
#dsromb {
margin: 0px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: absolute;
}
#dsromb:before {
content: "";
position: absolute;
    width: 0;
height: 0;
top:100px;
left:-50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid green;
}
</style>
<div id="dsromb"></div>


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

Для получения пятиугольника нам потребуется на трапецию приделать сверху треугольник.Для этого устанавливаем размеры трапеции с учётом её отступа от внешней границы для видимости помещённого на неё треугольника,значение отступа = высоте треугольника от основания до вершины.Дополнительно нужно установить свойство позиционирования для положения элемента относительно родителя.Теперь нужно браться за треугольник,который при помощи свойства генерации и псевдоэлемента отправит свои установленные значения имеющейся в наличии трапеции.Разумеется что треугольник тоже должен иметь значение позиционирования,совокупность позиционирования обоих элементов будет зависить от их общего родительского элемента в котором они будут находиться.Этот пятиугольник сделан с относительными размерами,тоесть его углы не равны и додекаедра из него не получиться.Вы можете при желании произвести более щепетильные расчёты,если создавать 3D анимацию на базе пятиугольника.


<style>
#dspetiugolnik {
margin:100px;
position: relative;
width: 200px;
border-width: 150px 50px 0;
border-style: solid;
border-color: red transparent;
}
#dspetiugolnik:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -250px;
left: -50px;
border-width: 0 150px 100px;
border-style: solid;
border-color: transparent transparent green;
}
</style>
<div id="dspetiugolnik"></div>


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

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


<style>
#dsshestiugolnik {
margin:50px;
width: 200px;
height: 110px;
background-color: red;
position: absolute;
}
#dsshestiugolnik:before {
content: "";
position: absolute;
top: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid green;
}
#dsshestiugolnik:after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 50px solid blue;
}
</style>
<div id="dsshestiugolnik"></div>

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

Это прямоугольник на который сгенерированы трапеции.Действия протекают по аналогии предыдущих примеров,одни модели генерируются на другие.



<style>
#dsvosmiugolnik {
margin:0px;
width: 200px;
height: 200px;
background: red;
position: relative;
}
#dsvosmiugolnik:before {
content: "";
position: absolute;
top: 0;
left: 0;
  border-bottom: 58px solid green;
border-left: 58px solid white;
border-right: 58px solid white;
width: 84px;
height: 0;
}
#dsvosmiugolnik:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
   border-top: 58px solid blue;
border-left: 58px solid white;
border-right: 58px solid white;
width: 84px;
height: 0;
}</style>
<div id="dsvosmiugolnik"></div>


Звезда с пятью углами

Здесь происходят всё те же манипуляции с генерированием контента.Берём один треугольник,он красного цвета,размещаем его свойствами внешнего отступа,позиционирования и устанавливаем угол с помощью свойства трансформации.Затем берём второй треугольник аналогичных размеров и генерируем его в начало первого треугольника,этот треугольник зелёного цвета,он находится первым и остальные закрывают его,поэтому от него осталась видна только верхняя часть.Ему устанавливаем значения 2D трансформации обратно пропорциональные первому ( основному ) треугольнику.Теперь нам потребуется третий теугольник,его генерируем в конец элемента,на видимой оси он находится к нам ближе остальных и его видно полностью.Устанавливаем ему значения для положения угла в 2 раза превышающие угол заданный первому сгенерированному треугольнику.В итоге путём наложения получаем звезду с пятью углами,меняем её на кремлёвскую котрую продаём американцам и всё,можно смело идти в ресторан бухать на вырученные бабки ))).


<style>
#dszvezda5uglov {
margin: 100px;
position: absolute;
width: 0px;
height: 0px;
border-right: 200px solid transparent;
border-bottom: 140px  solid red;
border-left: 200px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#dszvezda5uglov:before {
border-bottom: 160px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -120px;
content: "";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#dszvezda5uglov:after {
position: absolute;
top: 6px;
left: -209px;
width: 0px;
height: 0px;
border-right: 200px solid transparent;
border-bottom: 140px solid blue;
border-left: 200px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: "";
}
</style>
<div id="dszvezda5uglov"></div>


Звезда с шестью углами

Ну если Вы потратили время на чтение предыдущих описаний,а тем более попробовали сами поэкспериментировать то наверно не надо объяснять как работает этот элемент.Если первому элементу добавить внешнего отступа,а второму снизить значение положения в топе,то получится фигура ромб.Всё как в теории относительности,просто и понятно.


<style>
#dszvezda6uglov {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid red;
position: relative;
}
#dszvezda6uglov:after {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid green;
position: absolute;
content: "";
top: 50px;
left: -100px;
}
</style>
<div id="dszvezda6uglov"></div>


Звезда с восьмью углами

Восьмиугольность создают два квадрата которые находятся на одной оси но под разными углами по отношению друг к другу.


<style>
#dszvezda8uglov {
margin: 50px;
background: red;
width: 200px;
height: 200px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#dszvezda8uglov:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: blue;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
</style>
<div id="dszvezda8uglov"></div>


Звезда с двенадцатью углами

Три квадрата на одной плоскости под разными углами,результат = двенадцатиугольнику


<style>
#dszvezda12uglov {
margin:50px;
background: red;
width: 200px;
height: 200px;
position: relative;
text-align: center;
}
#dszvezda12uglov:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: green;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#dszvezda12uglov:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: blue;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
</style>
<div id="dszvezda12uglov"></div>


Фигура в виде сердца

На самом деле здесь участвуют два прямоугольника.Прямоугольники находятся на одной оси но под разным углом,верхние части округлены свойством радиуса.


<style>
#dsserdce {
position: relative;
width: 200px;
height: 180px;
}
#dsserdce:before {
position: absolute;
content: "";
left: 100px;
top: 0;
width: 100px;
height: 160px;
background: red;
border-radius: 100px 100px 0 0;
-o-border-radius: 100px 100px 0 0;
-khtml-border-radius: 100px 100px 0 0;
-icab-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 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%;
}
#dsserdce:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100px;
height: 160px;
background: blue;
-moz-border-radius: 100px 100px 0 0;
border-radius: 100px 100px 0 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%;
}
</style>
<div id="dsserdce"></div>


Символ двух энергий

Здесь всё начинается с прямоугольника которому закруглены углы свойством радиуса и манипуляциями с границами.Далее генерируется контент который своими границами вытесняет существующие создавая подобный эффект.


<style>
#dsdveenergii {
width: 200px;
height: 100px;
background-color: white;
border-color: black;
border-style: solid;
border-width: 4px 4px 90px 4px;
border-radius: 100%;
-o-border-radius: 100%;
-khtml-border-radius: 100%;
-icab-border-radius: 100%;
-webkit-border-radius: 100%;
position: absolute;
}
#dsdveenergii:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background-color: white;
border: 40px solid black;
border-radius: 100%;
-o-border-radius: 100%;
-khtml-border-radius: 100%;
-icab-border-radius: 100%;
-webkit-border-radius: 100%;
  width: 20px;
height: 20px;
}
#dsdveenergii:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: black;
border: 40px solid white;
border-radius:100%;
-o-border-radius: 100%;
-khtml-border-radius: 100%;
-icab-border-radius: 100%;
-webkit-border-radius: 100%;
  width: 20px;
height: 20px;
}
</style>
<div id="dsdveenergii"></div>


Проверьте примеры и экспериментируйте в редакторе HTML

Вставьте код примера в HTML редактор и проверьте.




Русские шрифты





Категория: Полезные статьи | Добавил: IZOTOP (02.09.2012) | Автор: Меренков Михаил W
Просмотров: 3069 | Теги: Figure, Геометрические фигуры, CSS3, image style, полезные примеры css3 | Рейтинг: 5.0/2

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]