Skip to main content

CSS clip path

Für ein ansprechendes Webdesign müssen Elemente manchmal auf eine bestimmte Art und Weise zurechtgeschnitten werden. Mit CSS clip path ist dies relativ leicht umsetzbar.

Was ist ein CSS clip path?

CSS Clip-Path ist eine sogenannte CSS Eigenschaft, mit der bestimmte Bereiche eines Elementes, beispielsweise eines Bildes, ein- oder ausgeblendet werden können, sodass nur Teile des Elementes auf einer Webseite dargestellt werden.

Auf Deutsch bedeutet clip path „Schneidpfad“ oder „Beschneidungspfad“ analog der Schnittlinie, auf der eine Schere geführt wird. Clip-path kann verwendet werden, um entweder eine von mehreren Basisformen oder einen Vector-Pfad (SVG Pfad) anzugeben, die jeweils als Scheidpfad für das Element verwendet werden sollen.

Elemente in CSS clip path

Bei der Verwendung von CSS clip path werden in der Regel alle die Teile, die außerhalb des Schneidpfades liegen, nicht angezeigt. Für die CSS Eigenschaft können folgende Grundelemente für die Definition des Schnittes verwendet werden:

  • none – das Element wird nicht beschnitten
  • inset – definiert ein Rechteck
  • circle – definiert einen Kreis
  • ellipse – definiert eine Ellipse
  • polygon – definiert ein beliebiges Vieleck

Info

Um mit der CSS Eigenschaft clip path ein Rechteck zu zeichnen, werden beispielsweise folgende Eingaben in der CSS Datei gemacht:

inset {
-webkit-clip-path: inset (30% 25% 30% 10%);
clip-path: inset (30% 25% 30% 10%);
}

Die 4 Prozentangaben dienen dazu, anzugeben, um wie viel die einzelnen Seiten des Rechteckes, bezogen auf den Rand des Elementes eingerückt werden sollen.

Weitere Informationen zu diesem Thema finden Sie hier:
https://www.css-tricks.com/


Sie haben noch Fragen?

Kontaktieren Sie uns


Weitere Inhalte