W CSS linie są głównie poziome lub pionowe. Jednak za pomocą właściwości CSS możesz zmienić pozycję linii. W kontekście CSS linia ukośna jest tylko obrotem poziomej linii pod kątem 45 stopni lub -45 stopni. Jest to możliwe z pomocą CSS ”przekształcać" nieruchomość.

Ten przewodnik pokaże, jak korzystać z CSS ”przekształcać„Własność do narysowania linii przekątnej.

Jak rysować przekątne w CSS?

Aby narysować przekątną w CSS, „przekształcać„Własność jest używana. Najpierw omówimy „przekształcać„Własność, abyś mógł ją lepiej zrozumieć.

Jaka jest właściwość „transformuj” w CSS?

W CSS „przekształcać”Właściwość jest używana do transformacji 2D i 3D elementów HTML. Korzystając z tej właściwości, element można obracać, przenosić, wypaczać i skalować. Mówiąc dokładniej, możesz użyć właściwości transformacji do rysowania linii przekątnej za pomocą CSS.

Składnia

Składnia właściwości transformacji to:

Transform: Brak | Funkcje transformacji

Opis powyższych wartości podano poniżej:

• nic: Służy do ograniczenia transformacji elementu.
• Funkcje transformacji: Służy do wywoływania różnych funkcji, takich jak rotacja, rotacja (), scale (), ruch () i skew ().

Sprawdźmy kilka praktycznych przykładów związanych z narysowaniem linii po przekątnej przy 45 i -45 stopniach.

Przykład 1: Narysuj linię przekątną na 45 stopni za pomocą CSS

Najpierw utwórz pustą div w sekcji HTML, aby dodać linię przekątną. W naszym przypadku dodaliśmy nagłówek

i a .

Html

Linia ukośna

Teraz przejdź do sekcji CSS, aby dodać linię ukośną.

W CSS użyliśmy „div„Aby uzyskać dostęp do utworzonego pojemnika w HTML. Następnie zastosuj „Bottom graniczny„Własność do niego i ustaw wartości granicy jako„3px”,„solidny", I "RGB (255, 0, 0)”Odpowiednio. Następnie użyj „szerokość„Właściwość w następnym kroku i ustaw wartości jako„40%". Ponadto przypisz wartość właściwości transformacji jako „Obrócić (45 stopni)”I właściwość transformacji jako„lewy„Aby narysować linię przekątną, zaczynając od lewej strony.

CSS

div
Bottom graniczny: 3px Solid RGB (255, 0, 0);
Szerokość: 45%;
Transform: Rotate (45DEG);
Transform-origin: lewy;

Notatka: Tutaj "Transform-origin„Właściwość służy do ustawienia pozycji przekątnej wzdłuż osi x i osi y.

W wyniku powyższego kodu zobaczysz następujące dane wyjściowe:

Przykład 2: Narysuj linię przekątną na poziomie -45 stopni za pomocą CSS

W tym przykładzie narysujemy linię przekątną za pomocą „-45 stopnia" kąt. W tym celu przejdź do sekcji CSS i zmień wartość właściwości transformacji i właściwości transformacji.

Tutaj ustawimy wartość właściwości transformacji jako „-45 stopnia”I transformuj się jako„Prawidłowy".

CSS

div
Bottom graniczny: 3PX Solid RGB (0, 47, 255);
Szerokość: 45%;
Transform: Rotate (-45DEG);
Transform-Origin: Racja;

Zapisz kod, przejdź do pliku HTML i wykonaj go, aby zobaczyć następujący wynik:

Powyższy obraz wskazuje, że właściwość transformacji jest pomyślnie zaimplementowana. Chcesz narysować linię w pudełku? Sprawdź następny przykład!

Przykład: Narysuj linię przekątną wewnątrz pudełka za pomocą CSS

Aby narysować przekątną wewnątrz pudełka, utwórz pudełko, a następnie narysuj w nim przekątną. Aby to zrobić, dodamy nagłówek i utworzymy nazwę klasy DIV „skrzynka”, A następnie stwórz kolejną div w swojej nazwie klasowej„linia".

Html

Linia ukośna

Teraz przejdź do CSS, aby narysować przekątną wewnątrz pola, określ wartości właściwości szerokości i wysokości jako „300px". Następnie dodaj granicę wokół Div za pomocą właściwości granicznej i ustaw jej wartości jako „5px”,„solidny", I "RGB (202, 33, 75)".

CSS

.skrzynka
szerokość: 300px;
Wysokość: 300px;
granica: 5px stały RGB (202, 33, 75);

To pokaże następujący wynik:

Następnie przejdź do drugiej div i przywołaj „calc ()”Funkcja obliczania długości przekątnej zgodnie z rozmiarem kwadratowego pudełka. W tym celu użyj wzoru przekątnego wewnątrz placu ”strona*√2”, Gdzie wartość √2 wynosi„1.41”, A bok kwadratu jest„300px".

Ponadto ustaw wartość właściwości granicznej jako „3px”,„solidny", I "RGB (1, 68, 12)”Odpowiednio. Na koniec przypisz wartość właściwości transformacji jako „Obrócić (45 stopni)”I właściwość transformacji jako„lewy„Aby narysować linię przekątną.

CSS

.linia
szerokość: calc (300px*1.41);
Bottom graniczny: 3px stały RGB (1, 68, 12);
Transform: Rotate (45DEG);
Transform-origin: lewy;

Wyjście

Zebraliśmy najłatwiejsze metody rysowania linii po przekątnej za pomocą CSS.

Wniosek

Aby narysować linię przekątną, „przekształcać„Zastosowana jest właściwość CSS, która zmienia pozycję zmian przekątnych zgodnie z daną wartością stopnia”, „45 stopnia" Lub "-45 stopnia". Korzystając z tego, możesz ustawić różne kąty linii zgodnie z wyborem. W tym artykule wyjaśniliśmy metodę narysowania linii przekątnej za pomocą właściwości transformacji za pomocą przykładów.