Създаване на геометрични фигури с помощта на CSS, CSS
По мое мнение, една от най-интересните новости в CSS3. Това е способността да се използва по-малък брой изображения в уеб дизайн и създаване на различни форми.
В днешния урок ще създадем геометрични фигури, които използват само свойствата на CSS3.
Това, което ще трябва да използвате това ръководство
кръг
HTML
За създаване на кръг с помощта на CSS. На първо място, ние използваме DIV таг. Повикване си име за самоличност парчета. Така че, в първия пример, ID е равна на Circle:
CSS
Що се отнася до CSS. Трябва само да зададете стойности на височина и ширина. и след това се определя от стойността на граничния радиус. равно на половината от ширината и височината:
HTML
За създаване на площад в CSS. както в примера на кръга, създаваме Разделение с квадратен ID. Така че, по-долу е кодът на блок Разделение:
CSS
За създаване на площад в CSS. Трябва само да зададете стойности за ширина и височина са равни помежду си:
правоъгълник
HTML
За да създадете правоъгълна форма в CSS. като в случай на квадрат, се създаде Разделение. където ID е същата правоъгълника:
CSS
Точно както в случая на площада задаваме стойности на ширина и височина. но този път ширината е по-голяма от височината:
HTML
За да създадете овална в CSS. Ние създаваме Разделение с идентификационен номер на овал:
CSS
Овалния подобен на кръг; с овална форма, правоъгълна с предварително определен радиус, равен на половината от височината:
триъгълник
HTML
И отново, за да се създаде триъгълник, използвайки CSS. Ние правим Разделение с идентификационен номер на триъгълник.
CSS
За да създадете триъгълник, ние ще манипулират граничния имота. Чрез промяна на ширината на границата, вие ще получите различни ъгли на въртене:
надолу триъгълник
HTML
Създаване на обърнат триъгълник с CSS. Отново се създаде Разделение. ID равен triangle_down:
CSS
Създаване на обърнат триъгълник, да работят на границата дебелина:
Триъгълник, сочещ наляво
HTML
За да създадете с триъгълна форма, която гледа на ляво, отново се създаде Разделение с ID triangle_left:
CSS
Създаване на триъгълник сочи наляво, работещи свойства дясната част на тройната граница:
Триъгълник, сочеща надясно
HTML
За да създадете с триъгълна форма, която гледа надясно, създайте Разделение с ID triangle_right:
CSS
Създаване на триъгълник сочещи на дясно, да работят свойствата дясната част на тройната граница:
HTML
За да се създаде "диамант" форма, създаване на DIV с ID диамант:
CSS
Rhombus могат да бъдат създадени по няколко начина. Използването на трансформиращия имот, заедно със стойностите на имотите се въртят. можем да покажем двата триъгълника един до друг:
HTML
За да се създаде "трапец" форма, създавайки Разделение с идентификационен номер на трапец.
CSS
Trapeze може да бъде създаден чрез определяне на еднакви стойности на лявата и дясната граница с плоска долната граница:
успоредник
HTML
За да се създаде "успоредник" форма, създаване на DIV с идентификационен номер на успоредник:
CSS
За създаване на успоредник зададена стойност, равна кос трансформира за завъртане на елемента под ъгъл от 30 градуса:
HTML
За създаване на "звезда" форма, създавайки Разделение с идентификационен номер на звезда:
CSS
Създаване на форми "звезда" - поредица от странни манипулация на граници с помощта на трансформиране на собствеността настроен да се върти. Вижте кода по-долу:
Star (6-краен)
HTML
За да създадете фигура "шест лъча", създаване на DIV с идентификационен номер на успоредник:
CSS
Шестолъчна звезда е създаден с помощта на границата на собственост. Създаване на две групи от цифри и съчетават в едно:
петоъгълник
HTML
За да създадете "петоъгълник" формата, създаване на DIV с идентификационен номер на петоъгълник:
CSS
Създаване на петоъгълник е създаването на два елемента, които след това се събират в едно. Първият елемент - с форма на трапец. След това се добавят по-горе триъгълна форма:
шестоъгълник
HTML
За да се създаде "шестоъгълник" форми създадоха Разделение с идентификационен номер на шестоъгълник:
CSS
Има няколко начина за създаване на шестоъгълник. Един от тях е идентичен на създаването на петоъгълник. Създаване на правоъгълна форма и в горната част на триъгълник добавете две:
осмоъгълник
HTML
За да създадете "осмоъгълник" формата, създаване на DIV с ID осмоъгълник:
CSS
Octagon е интересна фигура. На първо място, ние създаваме две трапецовидна форма и два триъгълника, поставени отстрани. Има няколко начина, но най-ефективен:
HTML
За създаване на "сърце" форма, създаване на DIV с ID сърце:
CSS
Тази цифра е доста трудно да се установи, но това може да бъде направено чрез завъртане на елементите под различни ъгли и да промените стойността на имота се трансформира-произхода за промяна на позицията на въртящи се елемента:
HTML
За да създадете фигура "яйце", създаване на DIV с ID яйце:
CSS
"Яйце" концепция форма е подобна на концепцията за форма "овална", с изключение на височината на имоти. която е по-голяма от ширината. И специална бележка на фигурата прикрепен радиус собственост. С избора на неговите стойности могат да се постигне желания резултат:
безкрайност
HTML
За създаване на "безкрайност" форма, създаване на DIV с ID безкрайност:
CSS
Фигура "безкрайност" може да бъде създаден чрез внимателно манипулиране граничен собственост и джантата подравняване:
HTML
За да създадете фигура "Библия", създаване на DIV с ID comment_bubble:
CSS
Тази цифра може да бъде създаден чрез създаване на триъгълник и определяне на свойствата на границите радиус. и след присъединяването на правоъгълника до лявата страна:
HTML
За да създадете фигура «Pacman», създайте Разделение с ID Pacman:
CSS
Създаване на Pacman - цялата работа. Манипулиране на имоти и граничен радиус за създаване на кръг с отворена лява страна:
заключение
Има изобилие от възможности за създаване на форми с помощта на CSS3. Можете да използвате тази цифра, като част от вашия проект, освен че имат приемливо "патерица" в случай на браузъри Джурасик ера, в подобие на Internet Explorer.
Превод на статията «Направи Shapes с CSS: Как да създадете различни форми в CSS» е изготвен от екип от приятелски Уеб дизайн проект от А до Я.