B. szybki CSS - clip path (game changer)

Niedawno uczyliśmy się jak stworzyć kształt trójkąta za pomocą czystego CSS. Clip path pozwoli nam to osiągnąć dużo prościej, łatwiej, w dodatku nadaje się do obrabiania obrazków tworząc kosmiczne kształty i animacje.

Nasz trójkąt z poprzedniego przykładu, dla przypomnienia, bo choć nowe rzeczy ułatwiają życie, stare warto znać:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 150px solid transparent;
            border-top: 0;
            border-bottom: 300px solid red;
          }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

Teraz zamieniamy trójkąt na kwadrat:

.triangle {
  width: 200px;
  height: 200px;
  background-color: tomato;
 }

Wyszukujemy w Google clip path generator. Ja używam strony Clippy. Wybieramy kształt trójkąta, ustawiamy dowolnie jego kształt i pokrycie, następnie kopiujemy (mamy na dole).

W moim przypadku wyszło mi coś takiego:

.triangle {
   width: 200px;
   height: 200px;
   background-color: tomato;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Clip path to prawdziwy game changer, a fakt, że nie musimy sami tego obliczać ani metodą prób i błędów w devtoolsach ustawiać (też możliwe i jak najbardziej wykonalne) tylko dodaje uroku tej właściwości CSS.

I to się nadaje do robienia animacji, galerii zdjęć i innych imponujących efektów. Z pewnością będziemy to ćwiczyć w przyszłości.

B. szybki CSS – clip path (game changer)