Bardzo szybki CSS - tworzymy półkole

Kolejna umiejętność, jaką powinniśmy posiadać, to efektywnie tworzenie półkola. Przyda się w wielu elementach – choćby animacjach ładowania z obracającym się kółkiem.

Na początku zdefiniujmy sobie nasze półkole w HTML:

<div class="semi-circle"></div>

Teraz zróbmy pełne koło w CSS, które będzie dla nas punktem wyjścia:

.semi-circle {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background-color: teal;
}

Tak zapisany border-radius jest zapisem skróconym – pełen zapis wygląda tak:

.semi-circle {
   width: 200px;
   height: 200px;
   border-radius: 50% 50% 50% 50%;
   background-color: teal;
}

Mamy tutaj, w tej kolejności (ruch wskazówek zegara):

lewe-górne zaokrąglenie
prawe-górne zaokrąglenie
prawe-dolne zaokrąglenie
lewe-dolne zaokrąglenie

Możemy teraz wejść na stronę, odpalić devtoolsy i zmniejszać strzałkami prawe-dolne oraz lewe-dolne aż do zera. Będziemy w czasie rzeczywistym widzieć, jak dolne zaokrąglenia się prostują, dzięki czemu lepiej to zrozumiemy, zwłaszcza jeżeli jesteśmy wzrokowcami.

Nowy zapis wygląda tak:

.semi-circle {
   width: 200px;
   height: 200px;
   border-radius: 50% 50% 0% 0%;
   background-color: teal;
}

Element wygląda, jak półkole osadzone na prostokącie. Jakiś domek albo świątynia, coś w ten deseń. Teraz wystarczy tylko dostosować wysokość elementu (połowa szerokości) aby dostać półkole.

.semi-circle {
   width: 200px;
   height: 100px;
   border-radius: 50% 50% 0% 0%;
   background-color: teal;
}

Jak widać – nie do końca. Te procenty psują wszystko. Najwidoczniej (sam tego nie wiem) te 50% oznacza 50% wysokości, nie szerokości. Zastanówmy się, jaka wartość bezwzględna (w pikselach) znajdowała się tam w poprzednim przykładzie? Element 200px na 200px, więc niezależnie w oparciu o co on te procenty wylicza, było tam… 100px.

.semi-circle {
   width: 200px;
   height: 100px;
   border-radius: 100px 100px 0 0;
   background-color: teal;
}

Mamy nasze półkole. Takie ćwiczenia CSSowe radzę wykonywać regularnie – zwłaszcza, jeżeli nie jesteśmy mistrzami frontendu. Właśnie dlatego. Nie zajmują dużo czasu, a potrafią wyrobić nasze umiejętności CSSowe, które bardzo się przydają.

Bardzo szybki CSS – tworzymy półkole