Autor publikacji: Virtual Patriot - Administrator

clip-path

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - clip-path property (LV1)

Przeznaczenie właściwości `clip-path`

Za pomocą właściwości clip-path możemy określić kształt, do którego powinien zostać przycięty obszar interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `clip-path`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: none
wyjątki initial: brak
animowanie: tak, lecz nie wartość none

Interpretacja właściwości `clip-path`

: tak
: tak
: tak, lecz z przedrostkiem -webkit-
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji właściwości clip-path.

Opis wartości właściwości `clip-path`

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości clip-path.

Domyślnie obszar elementu HTML nie jest w żaden sposób przycięty.

Przykład

  clip-path:none;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Obszar przykładowego elementu "div" nie jest w żaden sposób przycięty.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

inset()

Wyjaśnienie

Za pomocą właściwości clip-path oraz funkcji inset() możemy określić kształt prostokąta (opcjonalnie z zaokrąglonymi rogami), do którego powinien zostać przycięty obszar interesującego nas elementu HTML.

Przykład

  clip-path:inset(15px 30px 45px 60px);

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt prostokąta, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "inset()", w której to funkcji zostały użyte następujące wartości: "15px 30px 45px 60px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:inset(15px 30px 45px 60px);
        -webkit-clip-path:inset(15px 30px 45px 60px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

circle()

Wyjaśnienie

Za pomocą właściwości clip-path oraz funkcji circle() możemy określić kształt koła, do którego powinien zostać przycięty obszar interesującego nas elementu HTML.

Przykład

  clip-path:circle(125px at 175px 150px);

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt koła, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "circle()", w której to funkcji zostały użyte następujące wartości: "125px at 175px 150px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:circle(125px at 175px 150px);
        -webkit-clip-path:circle(125px at 175px 150px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

ellipse()

Wyjaśnienie

Za pomocą właściwości clip-path oraz funkcji ellipse() możemy określić kształt elipsy, do którego powinien zostać przycięty obszar interesującego nas elementu HTML.

Przykład

  clip-path:ellipse(125px 75px at 150px 100px);

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt elipsy, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "ellipse()", w której to funkcji zostały użyte następujące wartości: "125px 75px at 150px 100px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:ellipse(125px 75px at 150px 100px);
        -webkit-clip-path:ellipse(125px 75px at 150px 100px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

polygon()

Wyjaśnienie

Za pomocą właściwości clip-path oraz funkcji polygon() możemy określić kształt wielokąta, do którego powinien zostać przycięty obszar interesującego nas elementu HTML.

Przykład

  clip-path:polygon(25px 50px, 425px 75px, 275px 225px);

Obszar przykładowego elementu "div" został przycięty do kształtu przypominającego kształt wielokąta, ponieważ do wspomnianego elementu "div" została dodana właściwość "clip-path" wraz z wartością w postaci funkcji "polygon()", w której to funkcji zostały użyte następujące wartości: "25px 50px, 425px 75px, 275px 225px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        clip-path:polygon(25px 50px, 425px 75px, 275px 225px);
        -webkit-clip-path:polygon(25px 50px, 425px 75px, 275px 225px);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>