Как да направите основни и разширени форми с чист CSS

Виждали ли сте някога чист CSS уебсайт, където всеки елемент е завършен чрез CSS? CSS прави повече от просто стилизиращи елементи. CSS формите позволяват на уеб дизайнерите да създават персонализирани пътища като триъгълник, кръгове, многоъгълници и др. По този начин вече не сте принудени да вмъкнете плаващо изображение с прозрачен фон, само за да бъдете разочаровани от правоъгълна кутия около него.

В тази статия ще използваме CSS форми и няколко функционални стойности, за да кодираме различни форми.

Рисуване на основни CSS форми

Нека започнем с основните форми като квадрат, правоъгълник, триъгълник, кръг и елипса.

Квадрат и правоъгълник

Квадрат и правоъгълник са най-лесните форми за създаване в CSS. Всичко, което трябва да направите, е да създадете a и му дайте а височина и а ширина.

HTML

CSS

.rec-sq {
дисплей: гъвкав;
празнина: 2em;
марж: 2em;
}
.квадрат {
ширина: 15rem;
височина: 15rem;
фон: rgb (255, 123, 0);
}
.rectangle {
ширина: 24rem;
височина: 14rem;
фон: rgb (0, 119, 128);
}

Изход:

Кръг и елипса

Просто трябва да зададете a граница-радиус от 50% на квадрат и ще получите кръг. Направете същото с правоъгълника, за да получите елипса.

HTML

CSS

.circle {
ширина: 15rem;
височина: 15rem;
фон: rgb (255, 123, 0);
радиус на границата: 50%;
}
.ellipse {
ширина: 24rem;
височина: 14rem;
фон: rgb (0, 119, 128);
радиус на границата: 50%;
}

Изход:

Триъгълници

Ще използваме граници, за да създадем триъгълници. Чудите се как работи? Всичко, което трябва да направите, е да настроите ширина и височина на триъгълника до нула. Това означава, че вървим напред действителна ширина на елемента ще бъде ширина на границата. Също така, може би вече знаете, че ръбовете на границата са диагонали от 45 градуса един спрямо друг. Дайте различни цветове на всяка граница и задайте трите от тях на прозрачни. В крайна сметка ще имате своя триъгълник.

HTML

CSS

// общо за всички
тяло {
дисплей: гъвкав;
празнина: 5em;
марж: 15em;
}.sample {
височина: 8.5em;
ширина: 8.5em;
border-top: 1em плътен #9ee780;
граница вдясно: 1em плътен rgb (240, 241, 141);
граница-долу: 1em плътен rgb (145, 236, 252);
граница вляво: 1em плътен rgb (248, 115, 106);
}.триъгълник {
височина: 0;
ширина: 0;
border-top: 5em плътен #9ee780;
граница вдясно: 5em плътен rgb (240, 241, 141);
граница-долу: 5em плътен rgb (145, 236, 252);
граница вляво: 5em плътен rgb (248, 115, 106);
}

Изход:

Можете да си играете с височина и цвят на границата за да получите различни видове триъгълници. Например, можете да създадете триъгълник, насочен към посока нагоре, като дадете граница отдолу плътен цвят, докато всички останали граници са настроени на прозрачни. Освен това можете да създадете триъгълник, сочещ в правилната посока или правоъгълен триъгълник, като си играете с ширина на границата и цвят на границата.

HTML

CSS

.triangle-up {
височина: 0;
ширина: 0;
бордюр-отгоре: 5em плътен прозрачен;
граница вдясно: 5em плътно прозрачно;
граница-долу: 5em плътен rgb (145, 236, 252);
граница вляво: 5em плътно прозрачно;
}
.triangle-right {
ширина: 0;
височина: 0;
в стил бордюр: плътен;
ширина на границата: 4em 0 4em 8em;
цвят на границата: прозрачен прозрачен прозрачен rgb (245, 149, 221);
}
.triangle-bottom-right {
ширина: 0;
височина: 0;
в стил бордюр: плътен;
ширина на границата: 8em 0 0 8em;
цвят на границата: прозрачен прозрачен прозрачен rgb (151, 235, 158);
}

Изход:

Създаване на разширени форми с помощта на CSS

Можеш да използваш ::преди и ::следпсевдоелементи за създаване на усъвършенствани форми. С интелигентното използване на свойствата за позиция и трансформиране можете лесно да създавате сложни форми, използвайки чист CSS.

Форма на звезда (5 точки)

Ще трябва да манипулирате границите, като използвате стойността за завъртане на трансформацията. Идеята е да създадете две страни с помощта на a клас = "звезда", другите две страни използват ::след елемент, а последната страна с помощта на ::преди елемент.

HTML

CSS

.star-five {
марж: 3.125em 0;
позиция: относителна;
дисплей: блок;
ширина: 0em;
височина: 0em;
граница вдясно: 6.25em плътно прозрачно;
граница-долу: 4.3em плътен rgb (255, 174, 81);
граница вляво: 6.25em плътно прозрачно;
трансформиране: завъртане (35 градуса);
}
.star-five: преди {
граница-долу: 5em плътен rgb (255, 174, 81);
граница вляво: 2em плътно прозрачно;
граница вдясно: 1.875em плътно прозрачно;
позиция: абсолютна;
височина: 0;
ширина: 0;
отгоре: -45px;
вляво: -65px;
дисплей: блок;
съдържание: '';
трансформиране: завъртане (-35 градуса);
}
.star-five: след {
позиция: абсолютна;
дисплей: блок;
отгоре: 3px;
вляво: -105px;
ширина: 0;
височина: 0;
граница вдясно: 6.25em плътно прозрачно;
граница-долу: 4.3em плътен rgb (255, 174, 81);
граница вляво: 5.95em плътно прозрачно;
transform: rotate(-70deg);
съдържание: '';
}

Изход:

Пентагон

Можете да създадете петоъгълник, като комбинирате трапец и триъгълник. Използвайте граница и свойства на позицията оформете и групирайте ги.

HTML

CSS

.pentagon {
позиция: относителна;
ширина: 10em;
box-sizing: content-box;
ширина на границата: 10em 5em 0;
в стил бордюр: плътен;
цвят на границата: rgb (7, 185, 255) прозрачен;
margin-top: 20rem;
margin-left: 10rem;
}
.pentagon: преди {
съдържание: "";
позиция: абсолютна;
височина: 0;
ширина: 0;
отгоре: -18em;
вляво: -5em;
ширина на границата: 0 10em 8em;
в стил бордюр: плътен;
цвят на границата: прозрачен прозрачен rgb (7, 185, 255);
}

Изход:

диамант

Групирайте два триъгълника, насочени нагоре и надолу, като използвате позиция, за да създадете форма на диамант. Да, ще използваме граница свойства за създаване на тези триъгълници.

HTML

CSS

.diamond {
ширина: 0;
височина: 0;
позиция: относителна;
отгоре: -3em;
бордюр: 3em плътен прозрачен;
цвят на границата на дъното: rgb (129, 230, 255);
}
.diamond: след {
съдържание: '';
ширина: 0;
височина: 0;
позиция: абсолютна;
вляво: -3em;
отгоре: 3em;
бордюр: 3em плътен прозрачен;
цвят на границата на върха: rgb (129, 230, 255);
}

Изход:

Можете да създадете форма на диамантен щит, като промените височината на горния триъгълник, както е показано по-долу:

HTML

CSS

.диамант-щит
{
ширина: 0;
височина: 0;
бордюр: 3em плътен прозрачен;
граница-долу: 1.25em плътен rgb (71, 194, 231);
позиция: относителна;
отгоре: -3em;
}
.diamond-cut: след {
съдържание: '';
позиция: абсолютна;
вляво: -3em;
отгоре: 1.25em;
ширина: 0;
височина: 0;
бордюр: 3em плътен прозрачен;
граница отгоре: 4.4em плътен rgb (71, 194, 231);
}

Изход:

Сърцето

Формата на сърцето е малко твърда, но можете да го направите, като използвате ::преди и ::след псевдоелементи. Можете да използвате различни стойности на трансформирайте за да ги завъртите от различни ъгли, докато оформят перфектно сърцевидна форма. В крайна сметка можете да зададете трансформиране на произход за да зададете точката, около която се прилага трансформацията.

HTML

CSS

.heart {
ширина: 6.25em;
височина: 55em;
позиция: относителна;
}
.сърце: преди,
.heart: след {
съдържание: "";
ширина: 3em;
височина: 5em;
позиция: абсолютна;
вляво: 3em;
отгоре: 0;
фон: червен;
граница-радиус: 3em 3em 0 0;
трансформиране: завъртане (-45 градуса);
начало на трансформация: 0 100%;
}
.heart: след {
вляво: 0;
трансформиране: завъртане (45 градуса);
източник на трансформация: 100% 100%;
}

Изход:

Експериментирайте с чисти CSS форми

Вече трябва да сте запознати с различни чисти CSS изображения, които могат да бъдат изградени чрез писане на няколко реда код. Създаването на супер бърз уебсайт вече не е забързана задача, тъй като знаете как да си играете с кода. Най-хубавото е, че можете да резонирате с гласа на марката, като манипулирате различни форми и цветове според вашите изисквания. Затова продължете да експериментирате и открийте нови начини да рисувате страхотни форми само чрез CSS.

Как да създадете адаптивна лента за навигация с помощта на HTML и CSS

Обаждане на всички начинаещи уеб разработчици: този урок ще ви даде уменията, от които се нуждаете, за да създадете свои собствени respsonive навигационни ленти, използвайки само HTML и CSS!

Прочетете Следващото

За автора