Uczymy się tworzyć kształt trójkąta za pomocą CSS. Poznajemy zmienne CSS oraz funkcję calc, za pomocą której napiszemy trójkąt o dowolnej wielkości. Do dzieła!
Podobnie jak w wielu innych przypadkach kształtów CSS, użyjemy elementu <div> o określonej klasie, który później ostylujemy w CSS:
<div class="triangle"></div>Resetujemy style CSS, używamy flexboxa, aby wycentrować wszystkie elementy body (body musi mieć ustawioną wysokość):
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
}
body {
height: 100vh;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}Zostawiliśmy sobie pusty CSS ruleset na element root – w przyszłości będziemy tam trzymać naszą zmienną CSS. Na razie napiszmy trójkąt:
.triangle {
width: 0;
height: 0;
border: 150px solid transparent;
border-top: 0;
border-bottom: 300px solid red;
}Zasada tworzenia trójkąta w CSS dla leniwych:
- wysokość i szerokość ustawione na zero
- border – połowa podstawy trójkąta, kolor transparent
- border-top ustawione na zero
- border-bottom – podstawa trójkąta, tam ustawiamy kolor
Teraz możemy przenieść naszą podstawę do elementu root i trzymać ją jako zmienną:
:root {
--triangle-bottom: 300px;
}Teraz użyjemy tej zmiennej w dwóch miejscach, czyli w border-bottom (pobierając wartość zmiennej za pomocą funkcji var) oraz w border, gdzie za pomocą calc obliczmy połowę podstawy:
.triangle {
width: 0;
height: 0;
border: calc(var(--triangle-bottom)/2) solid transparent;
border-top: 0;
border-bottom: var(--triangle-bottom) solid red;
}Teraz możemy odpalić devtoolsy, znaleźć tę zmienną i za pomocą strzałek zmniejszać lub zwiększać aż do pożądanej wartości.
Trójkąt utrzyma swój kształt. Podstawa będzie równa tej zmiennej, zaś boki połowie tej zmiennej, kształt pozostanie trójkątem.
