Die Eigenschaft clip-path erlaubt es, einen Clipping-Bereich, der festlegt, welcher Teil des Elements angezeigt werden soll, anzugeben. Die Teile außerhalb des Clipping-Bereichs werden ausgeblendet. Diese Eigenschaft hat vier Werte: clip-source, basic-shape, geometry-box and none.
| Anfangswert | none |
| Gilt für | Alle Elemente. |
| Geerbt | Nein |
| Animierbar | Ja, falls angegeben für <basic-shape>. |
| Version | CSS1 |
| DOM Syntax | object.style.clipPath = "none"; |
Syntax
clip-path: clip-source | basic-shape | geometry-box | none | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px ;
grid-template-rows: 200px 200px 200px ;
grid-gap: 20px;
justify-content: center;
}
.container div {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg")
;
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
<body>
<h2>Ein Beispiel für die Eigenschaft Clip-path</h2>
<div class="container">
<div class="example">polygon</div>
</div>
</body>
</html>Ein weiteres Beispiel mit allen Werten der Eigenschaft clip-pathy.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<style>
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px ;
grid-template-rows: 200px 200px 200px ;
grid-gap: 20px;
justify-content: center;
}
.container > div {
background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
background-position: center;
background-size: cover;
color: #000;
font-size: 18px;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
clip-path: none;
}
.box2 {
clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
/* values are from-top, from-right, from-bottom, from-left */
}
.box3 {
clip-path: circle(50% at 50% 50%);
}
.box4 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.box5 {
clip-path: ellipse(90px 50px at 100px 100px);
}
.box6 {
clip-path: inherit;
}
.box7 {
clip-path: initial;
}
.box8 {
clip-path: unset;
}
</style>
<body>
<h2>Ein Beispiel für die Eigenschaft Clip-path</h2>
<div class="container">
<div class="box1">none</div>
<div class="box2">inset</div>
<div class="box3">circle</div>
<div class="box4">polygon</div>
<div class="box5">ellipse</div>
<div class="box6">inherit</div>
<div class="box7">initial</div>
<div class="box8">unset</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| <clip-source> | Das Element <url> , das auf ein SVG-Element <clipPath> verweist. |
| <basic-shape> | Die Form, deren Größe und Position durch <geometry-box> definiert wird. |
| <geometry-box> | Definiert die Referenzbox für die Grundform. |
| none | Clipping path is not created. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Ähnliche Quellen
Height, width, padding, margin, position, clip.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
|
55.0 (Partial) |
✕ | 54.0+ |
7.0 -webkit- (Partial) |
420 (Partial) |
Übe dein Wissen
Welche Arten von Werten nimmt die clip-path CSS-Eigenschaft an?
Richtig!
Falsch!