Jak tworzyć podstawowe i zaawansowane kształty za pomocą czystego CSS

Czy kiedykolwiek widziałeś stronę internetową z czystym CSS, w której każdy element jest wykańczany przez CSS? CSS to coś więcej niż tylko stylizowanie elementów. Kształty CSS umożliwiają projektantom stron internetowych tworzenie niestandardowych ścieżek, takich jak trójkąt, okręgi, wielokąty i nie tylko. W ten sposób nie musisz już wstawiać pływającego obrazu z przezroczystym tłem, tylko po to, by rozczarować go prostokątne pole wokół niego.

W tym artykule użyjemy kształtów CSS i kilku wartości funkcjonalnych do zakodowania różnych kształtów.

Rysowanie podstawowych kształtów CSS

Zacznijmy od podstawowych kształtów, takich jak kwadrat, prostokąt, trójkąt, okrąg i elipsa.

Kwadrat i prostokąt

Kwadrat i prostokąt to najłatwiejsze kształty do wykonania w CSS. Wszystko, co musisz zrobić, to stworzyć i daj mu wzrost i szerokość.

HTML

CSS

.rec-sq {
wyświetlacz: elastyczny;
przerwa: 2em;
marża: 2em;
}
.kwadrat {
szerokość: 15rem;
wysokość: 15rem;
tło: rgb (255, 123, 0);
}
.prostokąt {
szerokość: 24rem;
wysokość: 14rem;
tło: rgb (0, 119, 128);
}

Wyjście:

Okrąg i elipsa

Wystarczy przypisać promień-granicy 50% do kwadratu, a otrzymasz okrąg. Zrób to samo z prostokątem, aby uzyskać elipsę.

HTML

CSS

.okrąg {
szerokość: 15rem;
wysokość: 15rem;
tło: rgb (255, 123, 0);
promień graniczny: 50%;
}
.elipsa {
szerokość: 24rem;
wysokość: 14rem;
tło: rgb (0, 119, 128);
promień graniczny: 50%;
}

Wyjście:

Trójkąty

Użyjemy obramowań do stworzenia trójkątów. Zastanawiasz się, jak to działa? Wszystko, co musisz zrobić, to ustawić szerokość oraz wzrost trójkąta do zera. Oznacza to, że posuwając się do przodu, rzeczywista szerokość elementu będzie szerokość granicy. Być może już wiesz, że krawędzie obramowania są względem siebie po przekątnej 45 stopni. Nadaj różne kolory każdemu obramowaniu i ustaw dowolne trzy z nich jako przezroczyste. Ostatecznie będziesz miał swój trójkąt.

HTML

CSS

//wspólne dla wszystkich
ciało {
wyświetlacz: elastyczny;
przerwa: 5em;
marża: 15em;
}.próbka {
wysokość: 8,5em;
szerokość: 8,5em;
brzeg-góra: 1em stały #9ee780;
border-right: 1em solid rgb (240, 241, 141);
border-bottom: 1em solid rgb (145, 236, 252);
obramowanie po lewej: 1em solid rgb (248, 115, 106);
}.trójkąt {
wysokość: 0;
szerokość: 0;
brzeg-góra: 5em stały #9ee780;
obramowanie po prawej: 5em stałe rgb (240, 241, 141);
border-bottom: 5em solid rgb (145, 236, 252);
obramowanie po lewej: 5em solid rgb (248, 115, 106);
}

Wyjście:

Możesz się bawić wzrost oraz kolor ramki aby uzyskać różne rodzaje trójkątów. Na przykład możesz utworzyć trójkąt skierowany w górę, podając obramowanie-dół jednolity kolor, podczas gdy wszystkie inne obramowania są ustawione jako przezroczyste. Możesz także stworzyć trójkąt skierowany we właściwym kierunku lub trójkąt prostokątny, bawiąc się szerokość granicy oraz kolor ramki.

HTML

CSS

.trójkąt w górę {
wysokość: 0;
szerokość: 0;
border-top: 5em stały przezroczysty;
obramowanie po prawej: 5em stałe przezroczyste;
border-bottom: 5em solid rgb (145, 236, 252);
obramowanie po lewej: stałe przezroczyste 5em;
}
.trójkąt-prawo {
szerokość: 0;
wysokość: 0;
styl obramowania: solidny;
szerokość obramowania: 4em 0 4em 8em;
kolor obramowania: transparent transparent transparent rgb (245, 149, 221);
}
.trójkąt-dolny-prawy {
szerokość: 0;
wysokość: 0;
styl obramowania: solidny;
szerokość obramowania: 8em 0 0 8em;
kolor obramowania: transparent transparent transparent rgb (151, 235, 158);
}

Wyjście:

Tworzenie zaawansowanych kształtów za pomocą CSS

Możesz użyć ::przed oraz ::popseudoelementy do tworzenia zaawansowanych kształtów. Dzięki inteligentnemu wykorzystaniu właściwości pozycji i przekształcenia możesz łatwo budować złożone kształty za pomocą czystego CSS.

Kształt gwiazdy (5-punkty)

Będziesz musiał manipulować granicami za pomocą wartości obrotu przekształcenia. Chodzi o to, aby stworzyć dwie strony za pomocą klasa=”gwiazda”, pozostałe dwie strony za pomocą ::po element, a ostatnia strona za pomocą ::przed element.

HTML

CSS

.gwiazdka-pięć {
marża: 3.125em 0;
pozycja: względna;
Blok wyświetlacza;
szerokość: 0em;
wysokość: 0em;
obramowanie po prawej: 6.25em stałe przezroczyste;
border-bottom: stały rgb 4,3 em (255, 174, 81);
obramowanie po lewej: 6.25em stałe przezroczyste;
przekształć: obróć (35 stopni);
}
.star-pięć: przed {
border-bottom: 5em solid rgb (255, 174, 81);
obramowanie po lewej: 2em stałe przezroczyste;
obramowanie po prawej: 1.875em stałe przezroczyste;
pozycja: bezwzględna;
wysokość: 0;
szerokość: 0;
góra: -45px;
po lewej: -65px;
Blok wyświetlacza;
zadowolony: '';
przekształć: obróć (-35 stopni);
}
.star-pięć: po {
pozycja: bezwzględna;
Blok wyświetlacza;
góra: 3px;
po lewej: -105px;
szerokość: 0;
wysokość: 0;
obramowanie po prawej: 6.25em stałe przezroczyste;
border-bottom: stały rgb 4,3 em (255, 174, 81);
obramowanie po lewej: 5.95em stałe przezroczyste;
przekształć: obróć (-70 stopni);
zadowolony: '';
}

Wyjście:

Pięciokąt

Możesz stworzyć pięciokąt, łącząc trapez i trójkąt. Posługiwać się granica oraz właściwości pozycji kształtować i grupować je.

HTML

CSS

.pięciokąt {
pozycja: względna;
szerokość: 10em;
rozmiar pudełka: zawartość-pudełko;
szerokość obramowania: 10em 5em 0;
styl obramowania: solidny;
kolor obramowania: rgb (7, 185, 255) przezroczysty;
marża górna: 20 rem;
margines lewy: 10 rem;
}
.pentagon: przed {
zadowolony: "";
pozycja: bezwzględna;
wysokość: 0;
szerokość: 0;
góra: -18m;
po lewej: -5em;
szerokość-obramowania: 0 10em 8em;
styl obramowania: solidny;
kolor obramowania: transparent transparent rgb (7, 185, 255);
}

Wyjście:

Diament

Zgrupuj dwa trójkąty skierowane w górę i w dół, używając pozycji, aby utworzyć kształt rombu. Tak, użyjemy granica właściwości, aby utworzyć te trójkąty.

HTML

CSS

.diament {
szerokość: 0;
wysokość: 0;
pozycja: względna;
góra: -3em;
obramowanie: 3em stałe przezroczyste;
kolor dolnego obramowania: rgb (129, 230, 255);
}
.diament: po {
zadowolony: '';
szerokość: 0;
wysokość: 0;
pozycja: bezwzględna;
po lewej: -3em;
góra: 3em;
obramowanie: 3em stałe przezroczyste;
kolor górnego obramowania: rgb (129, 230, 255);
}

Wyjście:

Możesz stworzyć diamentowy kształt tarczy, zmieniając wysokość górnego trójkąta, jak pokazano poniżej:

HTML

CSS

.diamentowa tarcza
{
szerokość: 0;
wysokość: 0;
obramowanie: 3em stałe przezroczyste;
obramowanie-dół: 1,25 em solid rgb (71, 194, 231);
pozycja: względna;
góra: -3em;
}
.diamond-cut: po {
zadowolony: '';
pozycja: bezwzględna;
po lewej: -3em;
góra: 1,25m;
szerokość: 0;
wysokość: 0;
obramowanie: 3em stałe przezroczyste;
obramowanie górne: 4,4 em solid rgb (71, 194, 231);
}

Wyjście:

Serce

Kształt serca jest trochę twardy, ale możesz to zrobić za pomocą ::przed oraz ::po pseudoelementy. Możesz użyć różnych wartości przekształcać obracać je pod różnymi kątami, aż idealnie uformują kształt serca. Ostatecznie możesz ustawić transform-origin ustawić punkt, wokół którego stosowana jest transformacja.

HTML

CSS

.serce {
szerokość: 6.25em;
wzrost: 55em;
pozycja: względna;
}
.serce: przed,
.serce: po {
zadowolony: "";
szerokość: 3em;
wysokość: 5em;
pozycja: bezwzględna;
po lewej: 3m;
góra: 0;
tło: czerwone;
granica-promień: 3em 3em 0 0;
przekształć: obróć (-45 stopni);
transform-origin: 0 100%;
}
.serce: po {
po lewej: 0;
przekształć: obróć (45 stopni);
transform-origin: 100% 100%;
}

Wyjście:

Eksperymentuj z czystymi kształtami CSS

Powinieneś teraz zapoznać się z różnymi czystymi obrazami CSS, które można zbudować, pisząc kilka linijek kodu. Stworzenie superszybkiej strony internetowej nie jest już gorączkowym zadaniem, ponieważ wiesz, jak bawić się kodem. Najlepsze jest to, że możesz rezonować z głosem marki, manipulując różnymi kształtami i kolorami zgodnie z własnymi wymaganiami. Dlatego eksperymentuj i odkrywaj nowe sposoby rysowania niesamowitych kształtów wyłącznie za pomocą CSS.

Jak zbudować responsywny pasek nawigacyjny za pomocą HTML i CSS?

Zadzwoń do wszystkich początkujących twórców stron internetowych: ten samouczek da ci umiejętności potrzebne do tworzenia własnych responsywnych pasków nawigacyjnych przy użyciu tylko HTML i CSS!

Czytaj dalej

O autorze