Propiedades CSS Visualización
21-07-2022

clip
clip-path
display

overflow
overflow-x
overflow-y

visibility
white-space
z-index

clip 21-07-2022

La propiedad clip está en desuso.

Mostrar parte de una imagen. Cuando queremos recortar una imagen a una medida determinada.

Al elemento que se le aplica el clip tiene que tener posición absoluta.

Definir como aplicar el Clip según a un conjunto de coordenadas que pueden ser en px, %, em , etc.

Sólo admite un valor clip : rect(); Esto significa que sólo realiza recortes rectangulares.

Los valores de rect son en este orden (superior derecha inferior izquierda)

Nota: La propiedad clip no funciona si "overflow: visible".

Sintaxis: selector { clip : rect(0px 50px 100px 0px) }

Posibles valores:

auto - No se aplicará ningún recorte. Esto es el predeterminado.
shape - Acortar un elemento. El único valor válido es: rect (arriba, derecha, abajo, izquierda).
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

clip: rect(0px 225px 300px 0px)

<html>
<head>
<style>
div {
    clip: rect(0px 225px 300px 0px);
    height:400px;
    position:relative;
    width:280px;
}
img {
    left: 15px;
    position: absolute;
}
</style>
</head>
<body>
<div>
    <h2>Propiedad clip<h2>
    <img src="img/imagen.jpg" width="225" height="300"/>
</div>
</body>
</html>

Propiedad clip:

Arriba ... ⇑

clip-path 21-07-2022

La propiedad clip-path en CSS le permite especificar una región específica de un elemento para mostrar, en lugar de mostrar el área completa. La propiedad clip está en desuso.

El caso de uso más común sería una imagen, pero no se limita a eso. También podría aplicar fácilmente clip-patha una etiqueta de párrafo y solo a una parte del texto.

Definimos imagen

Código

Código HTML
<div class="ejemploClipPath"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}

Ejemplo I

Código

Código HTML
<div class="ejemploClipPath ejemI"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemI {
	-webkit-clip-path: polygon( 50% 0, 50% 5%, 93% 35%, 50% 65%, 50% 70%, 100% 35%, 50% 0, 50% 5%, 7% 35%, 50% 65%, 50% 70%, 0 35%, 50% 0, 50% 30%, 52% 31%, 52% 6%, 50% 5%, 48% 6%, 48% 31%, 50% 30%, 50% 35%, 93% 65%, 52% 94%, 52% 66%, 50% 70%, 50% 100%, 100% 65%, 100% 35%, 96% 37%, 96% 62%, 50% 30%, 50% 35%, 7% 65%, 48% 94%, 48% 66%, 50% 70%, 50% 95%, 50% 100%, 0 65%, 0% 35%, 4% 37%, 4% 62%, 50% 30%);
	clip-path: polygon( 50% 0, 50% 5%, 93% 35%, 50% 65%, 50% 70%, 100% 35%, 50% 0, 50% 5%, 7% 35%, 50% 65%, 50% 70%, 0 35%, 50% 0, 50% 30%, 52% 31%, 52% 6%, 50% 5%, 48% 6%, 48% 31%, 50% 30%, 50% 35%, 93% 65%, 52% 94%, 52% 66%, 50% 70%, 50% 100%, 100% 65%, 100% 35%, 96% 37%, 96% 62%, 50% 30%, 50% 35%, 7% 65%, 48% 94%, 48% 66%, 50% 70%, 50% 95%, 50% 100%, 0 65%, 0% 35%, 4% 37%, 4% 62%, 50% 30%);
}
.ejemI:hover {
	-webkit-animation: ejemploI 2s;
	animation: ejemploI 2s;
	-webkit-clip-path: polygon( 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 0, 100% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 50% 50%);
	clip-path: polygon( 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 0, 100% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 50% 50%);
}
@-webkit-keyframes ejemploI {
	0% {-webkit-clip-path: polygon( 50% 0, 50% 5%, 93% 35%, 50% 65%, 50% 70%, 100% 35%, 50% 0, 50% 5%, 7% 35%, 50% 65%, 50% 70%, 0 35%, 50% 0, 50% 30%, 52% 31%, 52% 6%, 50% 5%, 48% 6%, 48% 31%, 50% 30%, 50% 35%, 93% 65%, 52% 94%, 52% 66%, 50% 70%, 50% 100%, 100% 65%, 100% 35%, 96% 37%, 96% 62%, 50% 30%, 50% 35%, 7% 65%, 48% 94%, 48% 66%, 50% 70%, 50% 95%, 50% 100%, 0 65%, 0% 35%, 4% 37%, 4% 62%, 50% 30%);}
	33% {-webkit-clip-path: polygon( 50% 0, 50% 5%, 95% 50%, 50% 95%, 50% 100%, 100% 50%, 50% 0, 50% 5%, 5% 50%, 50% 95%, 50% 100%, 0 50%, 50% 0, 50% 5%, 52% 6%, 52% 6%, 50% 5%, 48% 6%, 48% 6%, 50% 5%, 50% 5%, 95% 50%, 52% 94%, 52% 94%, 50% 95%, 50% 100%, 100% 50%, 100% 50%, 95% 50%,  100% 50%, 50% 0, 50% 5%, 5% 50%, 48% 94%, 48% 94%, 50% 95%, 50% 100%, 50% 100%, 0 50%, 0% 50%, 4% 48%, 0 50%, 50% 0);}
	66% {-webkit-clip-path: polygon( 100% 0, 95% 5%, 95% 95%, 5% 95%, 0 100%, 100% 100%, 100% 0, 95% 5%, 5% 5%, 5% 95%, 0 100%, 0 0, 100% 0, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 95%, 5% 95%, 0 100%, 100% 100%, 100% 100%, 95% 95%, 95% 95%, 95% 5%, 95% 5%, 5% 5%, 5% 95%, 5% 95%, 5% 95%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 95% 5%);}
	100% {-webkit-clip-path: polygon( 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 0, 100% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 50% 50%);}
}
@keyframes ejemploI {
	0% {clip-path: polygon( 50% 0, 50% 5%, 93% 35%, 50% 65%, 50% 70%, 100% 35%, 50% 0, 50% 5%, 7% 35%, 50% 65%, 50% 70%, 0 35%, 50% 0, 50% 30%, 52% 31%, 52% 6%, 50% 5%, 48% 6%, 48% 31%, 50% 30%, 50% 35%, 93% 65%, 52% 94%, 52% 66%, 50% 70%, 50% 100%, 100% 65%, 100% 35%, 96% 37%, 96% 62%, 50% 30%, 50% 35%, 7% 65%, 48% 94%, 48% 66%, 50% 70%, 50% 95%, 50% 100%, 0 65%, 0% 35%, 4% 37%, 4% 62%, 50% 30%);}
    33% {clip-path: polygon( 50% 0, 50% 5%, 95% 50%, 50% 95%, 50% 100%, 100% 50%, 50% 0, 50% 5%, 5% 50%, 50% 95%, 50% 100%, 0 50%, 50% 0, 50% 5%, 52% 6%, 52% 6%, 50% 5%, 48% 6%, 48% 6%, 50% 5%, 50% 5%, 95% 50%, 52% 94%, 52% 94%, 50% 95%, 50% 100%, 100% 50%, 100% 50%, 95% 50%,  100% 50%, 50% 0, 50% 5%, 5% 50%, 48% 94%, 48% 94%, 50% 95%, 50% 100%, 50% 100%, 0 50%, 0% 50%, 4% 48%, 0 50%, 50% 0);}
	66% {clip-path: polygon( 100% 0, 95% 5%, 95% 95%, 5% 95%, 0 100%, 100% 100%, 100% 0, 95% 5%, 5% 5%, 5% 95%, 0 100%, 0 0, 100% 0, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 95%, 5% 95%, 0 100%, 100% 100%, 100% 100%, 95% 95%, 95% 95%, 95% 5%, 95% 5%, 5% 5%, 5% 95%, 5% 95%, 5% 95%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 95% 5%);}
	100% {clip-path: polygon( 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 0, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 0, 100% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 0, 50% 50%);}
}

Ejemplo II

Código

Código HTML
<div class="ejemploClipPath ejemII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemII {
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ejemII:hover {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Ejemplo III

Código

Código HTML
<div class="ejemploClipPath ejemIII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemIII {
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ejemIII:hover {
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}

Ejemplo IV

Código

Código HTML
<div class="ejemploClipPath ejemIV"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemIV {
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ejemIV:hover {
	-webkit-animation: ejemploIV 1s;
	animation: ejemploIV 1s;
	-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
@-webkit-keyframes ejemploIV {
	0% { -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
	50% { -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 0); }
	100% { -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); }
}
@keyframes ejemploIV {
	0% { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
	50% { clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 0); }
	100% { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); }
}

Ejemplo V

Código

Código HTML
<div class="ejemploClipPath ejemV"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemV {
	-webkit-clip-path: polygon(50% 0, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%);
	clip-path: polygon(50% 0, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%);
}
.ejemV:hover {
	-webkit-clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
	clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}

Ejemplo VI

Código

Código HTML
<div class="ejemploClipPath ejemVI"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemVI {
	-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 50%, 50% 50%);
}
.ejemVI:hover {
	-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 50% 100%, 50% 50%, 50% 100%, 100% 100%, 100% 0, 50% 0);
	clip-path: polygon(50% 50%, 50% 0, 0 0, 0 100%, 50% 100%, 50% 50%, 50% 100%, 100% 100%, 100% 0, 50% 0);
}

Ejemplo VII

Código

Código HTML
<div class="ejemploClipPath ejemVII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemVII {
	-webkit-clip-path: polygon(25% 0, 0 0, 0 100%, 25% 100%, 25% 0, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% 0);
	clip-path: polygon(25% 0, 0 0, 0 100%, 25% 100%, 25% 0, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% 0);
}
.ejemVII:hover {
	-webkit-clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 0);
	clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% 0, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 0);
}

Ejemplo VIII

Código

Código HTML
<div class="ejemploClipPath ejemVIII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemVIII{
	-webkit-clip-path: polygon(50% 50%, 10% 10%, 20% 0, 20% 0, 0 0, 0 20%, 0 20%, 10% 10%, 50% 50%, 90% 10%, 80% 0, 80% 0, 100% 0, 100% 20%, 100% 20%, 90% 10%, 50% 50%, 90% 90%, 100% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 100%, 90% 90%, 50% 50%, 10% 90%, 0 80%, 0 80%, 0 100%, 20% 100%, 20% 100%, 10% 90%, 50% 50%);
	clip-path: polygon(50% 50%, 10% 10%, 20% 0, 20% 0, 0 0, 0 20%, 0 20%, 10% 10%, 50% 50%, 90% 10%, 80% 0, 80% 0, 100% 0, 100% 20%, 100% 20%, 90% 10%, 50% 50%, 90% 90%, 100% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 100%, 90% 90%, 50% 50%, 10% 90%, 0 80%, 0 80%, 0 100%, 20% 100%, 20% 100%, 10% 90%, 50% 50%);
}
.ejemVIII:hover{
	-webkit-animation: ejemploVIII 1s;
	animation: ejemploVIII 1s;
	-webkit-clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 75% 25%, 50% 50%, 75% 75%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 75% 25%, 50% 50%, 75% 75%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);
}
@-webkit-keyframes ejemploVIII {
	0% {-webkit-clip-path: polygon(50% 50%, 10% 10%, 20% 0, 20% 0, 0 0, 0 20%, 0 20%, 10% 10%, 50% 50%, 90% 10%, 80% 0, 80% 0, 100% 0, 100% 20%, 100% 20%, 90% 10%, 50% 50%, 90% 90%, 100% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 100%, 90% 90%, 50% 50%, 10% 90%, 0 80%, 0 80%, 0 100%, 20% 100%, 20% 100%, 10% 90%, 50% 50%);}
	33% {-webkit-clip-path: polygon(50% 50%, 25% 25%, 50% 0, 50% 0, 0 0, 0 50%, 0 50%, 25% 25%, 50% 50%, 75% 25%, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 75% 25%, 50% 50%, 75% 75%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 75% 75%, 50% 50%, 25% 75%, 0 50%, 0 50%, 0 100%, 50% 100%, 50% 100%, 25% 75%, 50% 50%);}
	66% {-webkit-clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 0 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 75% 25%, 50% 50%, 75% 75%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 0 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);}
	100% {-webkit-clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 75% 25%, 50% 50%, 75% 75%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);}
}
@keyframes ejemploVIII {
	0% {clip-path: polygon(50% 50%, 10% 10%, 20% 0, 20% 0, 0 0, 0 20%, 0 20%, 10% 10%, 50% 50%, 90% 10%, 80% 0, 80% 0, 100% 0, 100% 20%, 100% 20%, 90% 10%, 50% 50%, 90% 90%, 100% 80%, 100% 80%, 100% 100%, 80% 100%, 80% 100%, 90% 90%, 50% 50%, 10% 90%, 0 80%, 0 80%, 0 100%, 20% 100%, 20% 100%, 10% 90%, 50% 50%);}
	33% {clip-path: polygon(50% 50%, 25% 25%, 50% 0, 50% 0, 0 0, 0 50%, 0 50%, 25% 25%, 50% 50%, 75% 25%, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 75% 25%, 50% 50%, 75% 75%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 75% 75%, 50% 50%, 25% 75%, 0 50%, 0 50%, 0 100%, 50% 100%, 50% 100%, 25% 75%, 50% 50%);}
	66% {clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 0 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 75% 25%, 50% 50%, 75% 75%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 0 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);}
	100% {clip-path: polygon(50% 50%, 25% 25%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 25% 25%, 50% 50%, 75% 25%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 75% 25%, 50% 50%, 75% 75%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 75% 75%, 50% 50%, 25% 75%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 25% 75%, 50% 50%);}
}

Ejemplo IX

Código

Código HTML
<div class="ejemploClipPath ejemIX"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemIX {
	-webkit-clip-path: polygon(0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 0, 80% 0, 100% 20%, 94% 20%, 74% 0, 80% 0, 80% 77%, 95% 92%, 95% 95%, 92% 95%, 77% 80%, 6% 80%, 20% 94%, 20% 100%, 0 80%, 0 0, 5% 5%, 5% 75%, 75% 75%, 75% 5%, 8% 5%, 23% 20%, 20% 20%, 20% 23%, 5% 8%, 5% 5%, 0 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20%);
	clip-path: polygon(0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 0, 80% 0, 100% 20%, 94% 20%, 74% 0, 80% 0, 80% 77%, 95% 92%, 95% 95%, 92% 95%, 77% 80%, 6% 80%, 20% 94%, 20% 100%, 0 80%, 0 0, 5% 5%, 5% 75%, 75% 75%, 75% 5%, 8% 5%, 23% 20%, 20% 20%, 20% 23%, 5% 8%, 5% 5%, 0 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20%);
}
.ejemIX:hover {
	-webkit-animation: ejemploIX 1s;
	animation: ejemploIX 1s;
	-webkit-clip-path: polygon( 0 0, 5% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 5%, 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 100% 0, 100% 100%, 100% 100%, 95% 100%, 100% 95%, 95% 100%, 5% 100%, 5% 100%, 0 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 5% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 0 0 );
	clip-path: polygon( 0 0, 5% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 5%, 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 100% 0, 100% 100%, 100% 100%, 95% 100%, 100% 95%, 95% 100%, 5% 100%, 5% 100%, 0 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 5% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 0 0 );
}
@-webkit-keyframes ejemploIX {
	0% {-webkit-clip-path: polygon( 0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 0, 80% 0, 100% 20%, 94% 20%, 74% 0, 80% 0, 80% 77%, 95% 92%, 95% 95%, 92% 95%, 77% 80%, 6% 80%, 20% 94%, 20% 100%, 0 80%, 0 0, 5% 5%, 5% 75%, 75% 75%, 75% 5%, 8% 5%, 23% 20%, 20% 20%, 20% 23%, 5% 8%, 5% 5%, 0 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20% );}
	30% {-webkit-clip-path: polygon( 20% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 20% 0, 100% 0, 100% 20%, 95% 20%, 95% 0, 100% 0, 100% 80%, 100% 100%, 95% 95%, 95% 95%, 95% 80%, 25% 80%, 25% 95%, 20% 100%, 20% 80%, 20% 0, 23% 5%, 25% 75%, 95% 75%, 95% 5%, 25% 5%, 25% 20%, 20% 20%, 20% 20%, 20% 5%, 20% 5%, 20% 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20% );}
	60% {-webkit-clip-path: polygon( 20% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 20% 0, 100% 0, 80% 22%, 75% 20%, 93% 0, 100% 0, 100% 80%, 80% 100%, 75% 100%, 80% 93%, 93% 80%, 25% 80%, 4% 100%, 0 98%, 20% 78%, 20% 0, 25% 5%, 25% 75%, 95% 75%, 95% 5%, 22% 5%, 7% 20%, 0 20%, 0 20%, 20% 0, 20% 0, 20% 0, 0 20%, 80% 20%, 80% 100%, 0 100%, 0 20%, 5% 25%, 5% 95%, 75% 95%, 75% 25%, 5% 25%, 0 20% );}
	100% {-webkit-clip-path: polygon( 0 0, 5% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 5%, 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 100% 0, 100% 100%, 100% 100%, 95% 100%, 100% 95%, 95% 100%, 5% 100%, 5% 100%, 0 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 5% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 0 0 );}
}
@keyframes ejemploIX {
	0% {clip-path: polygon( 0 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 0 0, 80% 0, 100% 20%, 94% 20%, 74% 0, 80% 0, 80% 77%, 95% 92%, 95% 95%, 92% 95%, 77% 80%, 6% 80%, 20% 94%, 20% 100%, 0 80%, 0 0, 5% 5%, 5% 75%, 75% 75%, 75% 5%, 8% 5%, 23% 20%, 20% 20%, 20% 23%, 5% 8%, 5% 5%, 0 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20% );}
	30% {clip-path: polygon( 20% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 20% 0, 100% 0, 100% 20%, 95% 20%, 95% 0, 100% 0, 100% 80%, 100% 100%, 95% 95%, 95% 95%, 95% 80%, 25% 80%, 25% 95%, 20% 100%, 20% 80%, 20% 0, 23% 5%, 25% 75%, 95% 75%, 95% 5%, 25% 5%, 25% 20%, 20% 20%, 20% 20%, 20% 5%, 20% 5%, 20% 0, 20% 20%, 100% 20%, 100% 100%, 20% 100%, 20% 20%, 25% 25%, 25% 95%, 95% 95%, 95% 25%, 25% 25%, 20% 20% );}
	60% {clip-path: polygon( 20% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 20% 0, 100% 0, 80% 22%, 75% 20%, 93% 0, 100% 0, 100% 80%, 80% 100%, 75% 100%, 80% 93%, 93% 80%, 25% 80%, 4% 100%, 0 98%, 20% 78%, 20% 0, 25% 5%, 25% 75%, 95% 75%, 95% 5%, 22% 5%, 7% 20%, 0 20%, 0 20%, 20% 0, 20% 0, 20% 0, 0 20%, 80% 20%, 80% 100%, 0 100%, 0 20%, 5% 25%, 5% 95%, 75% 95%, 75% 25%, 5% 25%, 0 20% );}
	100% {clip-path: polygon( 0 0, 5% 5%, 95% 5%, 95% 95%, 5% 95%, 5% 5%, 0 0, 100% 0, 100% 0, 95% 0, 95% 0, 100% 0, 100% 100%, 100% 100%, 95% 100%, 100% 95%, 95% 100%, 5% 100%, 5% 100%, 0 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 5% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 5% 5%, 5% 95%, 95% 95%, 95% 5%, 5% 5%, 0 0 );}
}

Ejemplo X

Código

Código HTML
<div class="ejemploClipPath ejemX"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemX {
	-webkit-clip-path: polygon(50% 50%, 75% 50%, 100% 25%, 75% 0, 50% 25%, 75% 50%, 50% 50%, 25% 50%, 0 25%, 25% 0, 50% 25%, 25% 50%, 50% 50%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 25% 50%, 50% 50%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 75% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 75% 50%, 100% 25%, 75% 0, 50% 25%, 75% 50%, 50% 50%, 25% 50%, 0 25%, 25% 0, 50% 25%, 25% 50%, 50% 50%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 25% 50%, 50% 50%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 75% 50%, 50% 50%);
}
.ejemX:hover {
	-webkit-clip-path: polygon(50% 50%, 50% 50%, 100% 50%, 100% 0, 50% 0%, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 50%, 100% 50%, 100% 0, 50% 0%, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 0, 50% 0, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%);
}

Ejemplo XI

Código

Código HTML
<div class="ejemploClipPath ejemXI"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXI {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
}
.ejemXI:hover {
	-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
}

Ejemplo XII

Código

Código HTML
<div class="ejemploClipPath ejemXII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXII {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
}
.ejemXII:hover {
	-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
}

Ejemplo XIII

Código

Código HTML
<div class="ejemploClipPath ejemXIII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXIII {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);
}
.ejemXIII:hover {
	-webkit-animation: ejemploXIII 1s;
	animation: ejemploXIII 1s;
	-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);
}
@-webkit-keyframes ejemploXIII {
	0% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	25% {-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	50% {-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	75% {-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);}
	100% {-webkit-clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);}
}
@keyframes ejemploXIII {
	0% {clip-path: polygon(50% 50%, 50% 25%, 25% 0, 0 25%, 25% 50%, 50% 25%, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	25% {clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 25%, 75% 0, 100% 25%, 75% 50%, 50% 25%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	50% {clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 75%, 25% 50%, 0 75%, 25% 100%, 50% 75%, 50% 50%);}
	75% {clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 75%, 75% 50%, 100% 75%, 75% 100%, 50% 75%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);}
	100% {clip-path: polygon(50% 50%, 50% 0, 0 0, 0 50%, 50% 50%, 50% 0, 50% 50%, 50% 50%, 50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 100%, 50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%, 50% 50%, 0 50%, 0 100%, 50% 100%, 50% 50%, 50% 50%);}
}

Ejemplo XIV

Código

Código HTML
<div class="ejemploClipPath ejemXIV"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXIV {
	-webkit-clip-path: polygon(50% 25%, 25% 0, 0 25%, -25% 0, 0 -25%, 25% 0, 50% -25%, 75% 0, 100% -25%, 125% 0, 100% 25%, 75% 0, 50% 25%, 75% 50%, 100% 25%, 125% 50%, 100% 75%, 75% 50%, 50% 75%, 75% 100%, 100% 75%, 125% 100%, 100% 125%, 75% 100%, 50% 125%, 25% 100%, 0 125%, -25% 100%, 0 75%, 25% 100%, 50% 75%, 25% 50%, 0 75%, -25% 50%, 0 25%, 25% 50%, 50% 25%);
    clip-path: polygon(50% 25%, 25% 0, 0 25%, -25% 0, 0 -25%, 25% 0, 50% -25%, 75% 0, 100% -25%, 125% 0, 100% 25%, 75% 0, 50% 25%, 75% 50%, 100% 25%, 125% 50%, 100% 75%, 75% 50%, 50% 75%, 75% 100%, 100% 75%, 125% 100%, 100% 125%, 75% 100%, 50% 125%, 25% 100%, 0 125%, -25% 100%, 0 75%, 25% 100%, 50% 75%, 25% 50%, 0 75%, -25% 50%, 0 25%, 25% 50%, 50% 25%);
}
.ejemXIV:hover {
	-webkit-clip-path: polygon(100% 0, 100% -100%, 0 -100%, 0 -200%, 100% -200%, 100% -100%, 200% -100%, 200% 0, 200% 100%, 300% 100%, 200% 100%, 200% 0, 100% 0, 100% 100%, 200% 100%, 200% 200%, 100% 200%, 100% 100%, 0 100%, 0 200%, 100% 200%, 100% 300%, 0 300%, 0 200%, -100% 200%, -100% 100%, -200% 100%, -200% 0, -100% 0, -100% 100%, 0 100%, 0 0, -100% 0, -100% -100%, 0 -100%, 0 0, 100% 0);
    clip-path: polygon(100% 0, 100% -100%, 0 -100%, 0 -200%, 100% -200%, 100% -100%, 200% -100%, 200% 0, 200% 100%, 300% 100%, 200% 100%, 200% 0, 100% 0, 100% 100%, 200% 100%, 200% 200%, 100% 200%, 100% 100%, 0 100%, 0 200%, 100% 200%, 100% 300%, 0 300%, 0 200%, -100% 200%, -100% 100%, -200% 100%, -200% 0, -100% 0, -100% 100%, 0 100%, 0 0, -100% 0, -100% -100%, 0 -100%, 0 0, 100% 0);
}

Ejemplo XV

Código

Código HTML
<div class="ejemploClipPath ejemXV"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXV {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
}
.ejemXV:hover {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);
}

Ejemplo XVI

Código

Código HTML
<div class="ejemploClipPath ejemXVI"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXVI {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%,   50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
}
.ejemXVI:hover {
	-webkit-animation: ejemploXVI 2s;
	animation: ejemploXVI 2s;
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);
}
@-webkit-keyframes ejemploXVI {
	0% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%,   50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	48% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	52% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	100% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);}
}
@keyframes ejemploXVI {
	0% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%,   50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	48% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	52% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	100% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 12.5%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 25% 50%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 100%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 25% 100%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%);}
}

Ejemplo XVII

Código

Código HTML
<div class="ejemploClipPath ejemXVII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXVII {
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);
}
.ejemXVII:hover {
	-webkit-animation: ejemploXVII 1s;
	animation: ejemploXVII 1s;
	-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);
	clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);
}
@-webkit-keyframes ejemploXVII {
	0% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	12.5% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%,   50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	25% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	37.5% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	50% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	62.5% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	75% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	87.5% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	100% {-webkit-clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
}
@keyframes ejemploXVII {
	0% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 12.5%, 12.5% 0, 0 12.5%, 12.5% 25%, 25% 12.5%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 87.5%, 87.5% 75%, 100% 87.5%, 87.5% 100%, 75% 87.5%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	12.5% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 12.5%, 37.5% 0, 50% 12.5%, 37.5% 25%, 25% 12.5%, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%,   50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 87.5%, 62.5% 75%, 50% 87.5%, 62.5% 100%, 75% 87.5%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	25% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 12.5%, 62.5% 0, 50% 12.5%, 62.5% 25%, 75% 12.5%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 87.5%, 37.5% 75%, 50% 87.5%, 37.5% 100%, 25% 87.5%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	37.5% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 12.5%, 87.5% 0, 100% 12.5%, 87.5% 25%, 75% 12.5%, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 87.5%, 12.5% 75%, 0 87.5%, 12.5% 100%, 25% 87.5%, 25% 75%, 50% 75%, 50% 50%);}
	50% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 37.5%, 87.5% 25%, 100% 37.5%, 87.5% 50%, 75% 37.5%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 62.5%, 12.5% 50%, 0 62.5%, 12.5% 75%, 25% 62.5%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	62.5% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 37.5%, 62.5% 25%, 50% 37.5%, 62.5% 50%, 75% 37.5%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 62.5%, 37.5% 50%, 50% 62.5%, 37.5% 75%, 25% 62.5%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	75% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 37.5%, 37.5% 25%, 50% 37.5%, 37.5% 50%, 25% 37.5%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 62.5%, 62.5% 50%, 50% 62.5%, 62.5% 75%, 75% 62.5%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	87.5% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 37.5%, 12.5% 25%, 0 37.5%, 12.5% 50%, 25% 37.5%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 62.5%, 87.5% 50%, 100% 62.5%, 87.5% 75%, 75% 62.5%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
	100% {clip-path: polygon(50% 50%, 50% 25%, 25% 25%, 25% 25%, 25% 0, 0 0, 0 25%, 25% 25%, 25% 25%, 25% 0, 50% 0, 50% 25%, 25% 25%, 25% 0, 25% 25%, 25% 50%, 25% 25%, 50% 25%, 50% 50%, 25% 50%, 25% 25%, 25% 25%, 0 25%, 0 50%, 25% 50%, 25% 25%, 25% 25%, 50% 25%, 50% 50%, 50% 25%, 75% 25%, 75% 25%, 75% 0, 50% 0, 50% 25%, 75% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 75% 25%, 75% 0, 75% 25%, 75% 50%, 75% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 25%, 75% 25%, 50% 25%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 50% 50%, 50% 75%, 75% 75%, 75% 75%, 75% 50%, 100% 50%, 100% 75%, 75% 75%, 75% 50%, 75% 75%, 75% 100%, 75% 75%, 100% 75%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 100%, 75% 100%, 75% 75%, 75% 75%, 50% 75%, 50% 50%, 50% 75%, 25% 75%, 25% 75%, 25% 50%, 0 50%, 0 75%, 25% 75%, 25% 75%, 25% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 50%, 25% 75%, 25% 100%, 25% 75%, 50% 75%, 50% 100%, 25% 100%, 25% 75%, 25% 75%, 0 75%, 0 100%, 25% 100%, 25% 75%, 25% 75%, 50% 75%, 50% 50%);}
}

Ejemplo XVIII

Código

Código HTML
<div class="ejemploClipPath ejemXVIII"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXVIII {
	-webkit-clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
	clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
}
.ejemXVIII:hover {
	-webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 0 0, 0 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%);
	clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 0 0, 0 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%);
}

Ejemplo XIX

Código

Código HTML
<div class="ejemploClipPath ejemXIX"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXIX {
	-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
	clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
}
.ejemXIX:hover {
	-webkit-clip-path: polygon(50% 50%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 10%, 50% 50%, 10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
	clip-path: polygon(50% 50%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 10%, 50% 50%, 10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 10%);
}

Ejemplo XX

Código

Código HTML
<div class="ejemploClipPath ejemXX"></div>

Estilos CSS
.ejemploClipPath{
	width:150px;
	height:150px;
	background-color:green;
	transition:all 1s;
	display:block;
	margin:1em;
	background:url(URL-IMAGEN) center center;
	background-size:cover;
}
.ejemXX {
	-webkit-clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 90% 10%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 90%, 10% 90%, 10% 10%);
	clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 10%, 90% 10%, 90% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 10% 90%, 10% 90%, 10% 90%, 10% 10%);
}
.ejemXX:hover {
	-webkit-clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 90%, 50% 50%, 10% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 90% 90%, 50% 50%, 10% 10%, 10% 10%);
	clip-path: polygon(10% 10%, 0 0, 100% 0, 100% 100%, 90% 90%, 90% 90%, 50% 50%, 10% 10%, 10% 10%, 0 0, 0 100%, 100% 100%, 90% 90%, 90% 90%, 50% 50%, 10% 10%, 10% 10%);
}

Arriba ... ⇑

display 21-07-2022

Especifica cómo debe mostrarse un elemento HTML determinado. Establece el tipo de caja generada por un elemento.

Nota: Los valores "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row" no son compatibles en IE7 y anteriores. IE8 requiere un !DOCTYPE. IE9 admite los valores.

Nota: Los valores "flex" y "inline-flex" requieren un prefijo para trabajar en Safari. Para "flex" use "display: -webkit-flex", para "inline-flex" use "display: -webkit-inline-flex;".

Sintaxis: selector { display : valor }

inline - Valor predeterminado. Hace que la caja de un elemento sea en linea, su caja sólo ocupa el espacio necesario para mostrar sus contenidos (como <span>). Ver ejemplo ...
block - Hace que la caja de un elemento sea de bloque, ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio (como <p>). Ver ejemplo ...
flex - Muestra un elemento como un contenedor flexible de nivel de bloque. Nuevo en CSS3.
inline-block - Se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en línea. Ver ejemplo ...
inline-flex - Muestra un elemento como un contenedor flex en línea. Nuevo en CSS3.
inline-table - El elemento se muestra como una tabla en línea
list-item - Hace que cualquier elemento de cualquier tipo se muestre como si fuera un elemento de una lista (elemento <li>) a efectos de su visualización, por lo que se pueden utilizar las propiedades de listas como list-style-type, list-style-image, list-style-position y list-style. Ver ejemplo ...
run-in - Genera una caja de bloque o una caja en línea dependiendo del contexto, es decir, dependiendo de sus elementos adyacentes. El comportamiento se rige por las siguientes reglas:
- Si la caja run-in contiene una caja de bloque, la caja run-in se convierte en una caja de bloque.
- Si después de la caja run-in se encuentra una caja de bloque (que no esté posicionada de forma absoluta ni flotante), la caja run-in se convierte en una caja en línea en el interior de la caja de bloque.
- En cualquier otro caso, la caja run-in se convierte en una caja de bloque.
En la actualidad sólo la última versión del navegador Opera es capaz de mostrar correctamente.
table - El elemento contenedor se visualiza como una tabla (elemento <table> ).
table-caption - El elemento se comporta como un elemento <caption>.
table-column-group - El elemento se comporta como un elemento <colgroup>.
table-header-group - El elemento se comporta como un elemento <thead>.
table-footer-group - El elemento se comporta como un elemento <tfoot>.
table-row-group - El elemento se comporte como un elemento <tbody>.
table-cell - Hace que cualquier elemento se muestre como si fuera una celda de una tabla, elemento <td>.
table-column - Permite que el elemento se comporte como un elemento <col>.
table-row - El elemento se comporta como un elemento <tr>.
none - Hace que el elemento no genere ninguna caja. El resultado es que el elemento desaparece por completo de la página y no ocupa sitio, por lo que los elementos adyacentes ocupan su lugar. Todos sus descendientes también desaparecen por completo de la página. Se utiliza habitualmente en aplicaciones web dinámicas creadas con JavaScript y que muestran/ocultan contenidos cuando el usuario realiza alguna acción como pulsar un botón o un enlace. Ver ejemplo ...
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

Nota:
- No funciona en IE 5, 6, 7 y 8: inline-block, inline-table, run-in, table.
- No funciona en Firefox: inline-block, run-in.

display: block

<html>
<head>
<style>
.EjemDisplay p{
  border:dashed 1px #11C702;
  display:inherit;
  padding:0px 5px;
}
.EjemDisplay {
  width:200px;
  margin:auto;
  display: block;
}
</style>
</head>
<body>
<h2>Propiedad display<h2>
<p>Antes del contenedor</p>
<div class="EjemDisplay">
  <p style="background-color:#FCFCE9;">Parrafo 1</p>
  <p style="background-color:#E7F8E2;">Parrafo 2</p>
  <p style="background-color:#D6F4F8;">Parrafo 3</p>
  <p style="background-color:#FBDADA;">Parrafo 4</p>
</div>
<p>Despues del contenedor</p>
</body>
</html>

Antes del contenedor

Parrafo 1

Parrafo 2

Parrafo 3

Parrafo 4

Despues del contenedor

display: table;

<html>
<head>
<style>
.EjemDisplay2 {
    background-color:#CCCCCC;
    border:solid 1px #013201;
    border-spacing:5px;
    display:table;
    width:90%;
    margin:auto;
}
.titulo {text-align:center; display:table-caption;}
.fila {display:table-row;}
.ColIzq {background-color:#FDFBD8; display:table-cell; width:20%;}
.ColCen {background-color:#D8FDF9; display:table-cell; width:50%;}
.ColDer {background-color:#FDD8FA; display:table-cell; width:30%;}
</style>
</head>
<body>
<h2>Propiedad display<h2>
<div class="EjemDisplay2">
  <div class="titulo">Comportamiento tabla</div>
  <div class="fila">
    <div class="ColIzq">Columna izquierda Celda 1.1</div>
    <div class="ColCen">Columna central Celda 1.2</div>
    <div class="ColDer">Columna derecha Celda 1.3</div>
  </div>
  <div class="fila">
    <div class="ColIzq">Columna izquierda Celda 2.1</div>
    <div class="ColCen">Columna central Celda 2.2</div>
    <div class="ColDer">Columna derecha Celda 2.3</div>
  </div>
</div>
</body>
</html>

Comportamiento tabla

Columna izquierda Celda 1.1

Columna central Celda 1.2

Columna derecha Celda 1.3

Columna izquierda Celda 2.1

Columna central Celda 2.2

Columna derecha Celda 2.3

Arriba ... ⇑

overflow 21-07-2022

Insertar una barra de desplazamiento en caso que el contenido sea superior a la caja que lo contiene.

Esta propiedad especifica si se debe recortar contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada.

La propiedad overflow sólo funciona para elementos de bloque con una altura especificada. Se aplica a elementos de bloque, celdas de tabla y elementos de tipo inline-block

Si no se establece la propiedad width sobre un elemento, su tamaño se calcula automáticamente en función de si es un elemento de bloque o en línea, en función del tamaño del elemento contenedor en el que se encuentra y en función de algunos otros parámetros.

De la misma forma, si no se establece la propiedad height sobre un elemento, su valor por defecto es auto, lo que significa que el navegador muestra ese elemento con la altura necesaria para que sus contenidos se vean completamente.

Posibles valores:

visible - El desbordamiento no está recortado. Se hace fuera de la caja del elemento. Esto es el predeterminado.
hidden - El desbordamiento es recortado y el resto del contenido será invisible.
scroll - El desbordamiento está recortado, pero se agrega una barra de desplazamiento para ver el resto del contenido.
auto - Permite que cada navegador tome la decisión sobre si es necesario o no mostrar las barras de scroll. Aunque la decisión depende del navegador, el estándar de CSS 2.1 indica que si el contenido se sale del elemento, se deben mostrar barras de scroll.
- Si el contenido cabe dentro del elemento, no se muestra ninguna barra de scroll.
- Si el contenido se sale por un lado, sólo se muestra la barra de scroll de ese lado (horizontal o vertical).
- Si el contenido se sale por todos los lados, se muestran las dos barras de scroll.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

overflow: visible

<html>
<head>
<style>
div {
    overflow: visible;
}
</style>
</head>
<body>
<h2>Propiedad overflow<h2>
<div>
    <p>Texto</p>
    <p>Texto</p>
    <p>Texto</p>
    <p>Texto</p>
</div>
</body>
</html>

Juega con diferentes valores de propiedad de desbordamiento. Para demostrar los diferentes valores de propiedad, este texto se repite varias veces.

Arriba ... ⇑

overflow-x 21-07-2022

Especifica qué hacer con los bordes izquierdo / derecho del contenido, si se desborda el área de contenido del elemento.

Sugerencia: Utilice la propiedad overflow-y para determinar el recorte en los bordes superior e inferior.

Posibles valores:

visible - El contenido no está recortado y se puede representar fuera del cuadro de contenido.
hidden - El contenido se recorta - y no se proporciona ningún mecanismo de desplazamiento.
scroll - El contenido se recorta y se proporciona un mecanismo de desplazamiento.
auto - Debe hacer que se proporcione un mecanismo de desplazamiento para cajas desbordantes.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

overflow-x: visible

<html>
<head>
<style>
div {
    overflow-x: visible;
    height: 200px;
    width: 250px;
}
</style>
</head>
<body>
<h2>Propiedad overflow-x<h2>
<div>
    <img src="URL-IMAGEN" width="314px" height="462px"/>
</div>
</body>
</html>

Arriba ... ⇑

overflow-y 21-07-2022

Especifica qué hacer con los bordes superior e inferior del contenido, si se desborda el área de contenido del elemento.

Sugerencia: Utilice la propiedad overflow-x para determinar el recorte en los bordes izquierdo y derecho.

Posibles valores:

visible - Valor por defecto. El contenido no está recortado y se puede representar fuera del cuadro de contenido.
hidden - El contenido se recorta - y no se proporciona ningún mecanismo de desplazamiento.
scroll - El contenido se recorta y se proporciona un mecanismo de desplazamiento.
auto - Debe hacer que se proporcione un mecanismo de desplazamiento para cajas desbordantes.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

overflow-y: visible

<html>
<head>
<style>
div {
    overflow-y: visible;
    height: 200px;
    width: 250px;
}
</style>
</head>
<body>
<h2>Propiedad overflow-y<h2>
<div>
    <img src="URL-IMAGEN" width="314" height="462"/>
</div>
</body>
</html>

Arriba ... ⇑

visibility 21-07-2022

La propiedad de visibilidad especifica si un elemento es visible o no.

Sugerencia: Incluso los elementos invisibles ocupan espacio en la página. Utilice la propiedad display para crear elementos invisibles que no ocupan espacio.

Sintaxis: visibility: visible | hidden | collapse | initial | inherit;

Posibles valores:

visible - Valor por defecto. El elemento es visible.
hidden - El elemento es invisible (pero todavía ocupa espacio).
collapse - Sólo para elementos <table>. collapse elimina una fila o una columna, pero no afecta al diseño de la tabla. El espacio ocupado por la fila o columna estará disponible para otros contenidos. Si collapse se utiliza en otros elementos, se muestra como "oculto". La tabla sólo hace "collapse" en IE y Firefox.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

visibility : visible

<html>
<head>
<style>
div div {
    height:50px;
    line-height:50px;
    text-align:center;
}
.c1 { background: #D8F7F2; }
.c2 { background: #F9F0DE; }
.c3 { background: #C6F9DC; }
#ejem { visibility: visible; }
</style>
</head>
<body>
<h2>Propiedad visibility<h2>
<div>
    <div>Caja 1</div>
    <div id="ejem">Caja 2</div>
    <div>Caja 3</div>
</div>
</body>
</html>

Caja 1

Caja 2

Caja 3

Arriba ... ⇑

white-space 21-07-2022

Se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento.

Posibles valores:

normal - Es el valor predeterminado, se aplica a todos los elementos en los que no se determina la propiedad. Los espacios en blanco son simplificados, dejándose uno solo entre cada palabra, y se aplican todos los saltos de línea necesarios (además de los que sean determinados por la etiqueta <br> o <br />) para que el texto se mantenga dentro de los límites impuestos por el tamaño del selector. Sin embargo, los saltos de línea naturales del texto no son respetados.
nowrap - El tratamiento de los espacios en blanco es igual que cuando se aplica el modo normal, es decir, que se eliminan todos los espacios en blanco sobrantes. La diferencia con el modo normal es que no se aplican los saltos de línea a menos que se encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los límites del elemento.
pre - Cuando se aplica este valor, el navegador respeta todos los espacios en blanco que encuentre. Los saltos de línea que los navegadores colocan en forma automática en otros casos, cuando se aplica este valor no se colocan, por lo que el contenido puede desbordar los límites del elemento. Los saltos del línea del texto original son respetados.
pre-wrap - La aplicación de este valor de la propiedad hace que el navegador deje todos los espacios en blanco del contenido. A diferencia del valor “pre”, en este caso el navegador colocará los saltos de línea necesarios para que el contenido no desborde el tamaño del elemento en el que se aplica. También son respetados los saltos de línea originales.
pre-line - Cuando se aplica este valor, se deja un solo espacio en blanco, eliminándose el resto, mientras que se respetan los saltos de línea originales y se ajusta el texto, agregando los saltos de línea necesarios.
inherit - Hereda esta propiedad de su elemento padre.

white-space : normal

<html>
<head>
<style>
div { white-space: normal; }
</style>
</head>
<body>
<h2>Propiedad white-space<h2>
<div>
Hay casos    en que una propiedad puede        interferir con otra.<br>white-space: pre        y        white-space: nowrap ignoran las "posibilidades de ajuste" introducidas con hyphens y overflow-wrap de forma que estas propiedades no tendrán efecto.<br>Valores de white-space que permitan ajustes como pre-wrap pueden usar tanto separación silábica con guiones y ajuste por desbordamiento.
</div>
</body>
</html>

Hay casos en que una propiedad puede interferir con otra.
white-space: pre y white-space: nowrap ignoran las "posibilidades de ajuste" introducidas con hyphens y overflow-wrap de forma que estas propiedades no tendrán efecto.
Valores de white-space que permitan ajustes como pre-wrap pueden usar tanto separación silábica con guiones y ajuste por desbordamiento.

Arriba ... ⇑

z-index 21-07-2022

La propiedad z-index especifica el orden de solapamiento de niveles de capas.

Un elemento con mayor orden de pila siempre está delante de un elemento con un orden de pila inferior.

Nota: z-index sólo funciona en los elementos posicionados (position:absolute, position:relative, o position:fixed).

Sintaxis: z-index: auto | número | initial | inherit;

Posibles valores:

auto - Establece el orden de pila igual a sus padres. Esto es el predeterminado.
número - Establece el orden de la pila del elemento. Se permiten números negativos.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

z-index : auto

<html>
<head>
<style>
div {
    margin:auto;
    position:relative;
    width:250px;
}
.pos1, .pos2, .pos3 {
    position: absolute;
    max-height: 200px;
    width: auto;
}
.pos1 { left:0px; top:0px; z-index:1; }
.pos2 { left:40px; top:40px; z-index: auto; }
.pos3 { left:80px; top:80px; z-index:3; } 
</style>
</head>
<body>
<h2>Propiedad z-index<h2>
<div>
    <img src="URL imagen" class="pos1"/>
    <img src="URL imagen" class="pos2"/>
    <img src="URL imagen" class="pos3"/>
</div>
</body>
</html>

Arriba ... ⇑

Propiedades CSS Visualización21-07-2022

clip 21-07-2022

clip: rect(0px 225px 300px 0px)

Propiedad clip:

clip-path 21-07-2022

display 21-07-2022

display: block

display: table;

overflow 21-07-2022

overflow: visible

overflow-x 21-07-2022

overflow-x: visible

overflow-y 21-07-2022

overflow-y: visible

visibility 21-07-2022

visibility : visible

white-space 21-07-2022

white-space : normal

z-index 21-07-2022

z-index : auto

Propiedades CSS Visualización
21-07-2022