La propiedad clip-path en css nos permite establecer un área específica de un elemento a mostrar, en vez de mostrar todo el elemento en su totalidad, es decir, un área que corta el elemento.
Esto puede lograrse utilizando distintos valores de corte dependiendo del resultado deseado:
Valores de imagen:
clip-path: url(recursos.svg)
Valores geométricos:
clip-path: polygon ();
clip-path: circle ();
clip-path: inset (); /*Corta el área interna del la figura*/
Utilizando los valores geométricos:
clip-path: circle
.circle{
clip-path: circle(50%);
width: 300px;
height: 300px;
background: linear-gradient(#58C2ED, #1B85DC);
}
<div class="circle"></div>
Resultado:
clip-path: polygon
.polygon{
clip-path: polygon(0 0, 23% 0, 60% 48%, 24% 100%, 0 100%, 38% 48%);
width: 300px;
height: 300px;
background: linear-gradient(#58C2ED, #1B85DC);
}
<div class="polygon"></div>
Resultado:
Forma exterior
También podemos cortar el área externa de nuestra figura utilizando la propiedad shape-outside, lo que traería como resultado que el área circundante a nuestra figura funcione como molde al contenido exterior.
.half-circle{
float: left;
shape-outside: circle(50% at 0 50%);
clip-path: circle(50% at 0 50%);
width: 300px;
height: 300px;
background: linear-gradient(#58C2ED, #1B85DC);
margin-right: 40px;
}
<div class="half-circle"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
Resultado:
Animar formas
Se pueden realizar animaciones cambiando la forma de la figura haciendo una transición sobre el elemento utilizando solo css.
.animated-shape {
background-color: #fc4444;
color: white;
width: 300px;
height: 300px;
margin: 30px auto;
text-align: justify;
shape-inside: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
shape-padding: 20px;
transition: all 0.5s ease;
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.animated-shape:hover{
background-color: #97e146;
shape-inside: polygon(43% 46%, 21% 66%, 0 46%, 0% 80%, 20% 100%, 36% 84%, 52% 70%, 66% 55%, 82% 38%, 100% 20%, 84% 4%, 64% 25%);
-webkit-clip-path: polygon(43% 46%, 21% 66%, 0 46%, 0% 80%, 20% 100%, 36% 84%, 52% 70%, 66% 55%, 82% 38%, 100% 20%, 84% 4%, 64% 25%);
}
<div class="animated-shape"></div>
Resultado:
Animar botones
.btn{
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 49%, 0% 0%);
background-color: #16a085;
border: none;
padding: 1rem;
min-width: 8rem;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
transition: all 0.5s ease;
}
.btn:hover{
clip-path: polygon(88% 0, 100% 50%, 87% 100%, 0% 100%, 11% 50%, 0% 0%);
}
<button type="button" class="btn" name="button">button</button>
Resultado:
Interceptar textos y polígonos
Es posible utilizar múltiples figuras para encapsular textos en las formas que queramos. Teniendo como resultado que el texto se muestre siguiendo los patrones de las formas que lo rodean.
.left {
float: left;
shape-outside: polygon(0 0, 0 300px, 200px 300px);
clip-path: polygon(0 0, 0 300px, 200px 300px);
background: linear-gradient(to top right, #67D7F5, #868af7);
height: 300px;
width: 300px;
}
.right {
float: right;
shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
background: linear-gradient(to bottom left, #68d4f6, #73b8f6);
height: 300px;
width: 300px;
}
p{
text-alig:justify
}
<div class="left"></div> <div class="right"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
Resultado
Utilizar clip-path con svg
Se puede utilizar alguna figura en formato svg para hacer el corte de área. Es necesario que el código del svg este dentro del tag (clipPath) para restringir el área en el que se visualizara el svg o imagen dentro del mismo.
<div class="svg-shape"><div>
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M11.6,49.9c-1.3,1.9-1.9,4-1.9,6.5s1.3,5,3.8,7.7l6.3,6.5c6.7,6.9,13.5,13.6,20.3,20.2l10.2,9.7l10.2-9.7
c6.8-6.5,13.6-13.2,20.3-20.2l6.7-7c2.3-2.3,3.4-4.6,3.4-6.8V56c0-1.7-0.2-3-0.6-4.1s-1-2.1-1.9-3.1c-0.9-1.1-1.9-2.1-3-3
c-1-0.8-2.1-1.5-3.1-1.9s-2.3-0.6-3.9-0.6c-1.6,0-2.9,0.2-3.9,0.6c-1.1,0.5-2.2,1.2-3.4,2.2c-1.3,1-2.7,2.3-4.3,4.1l-4,4.1V12.8
c0-2.6-0.4-4.6-1.3-6c-0.9-1.5-1.7-2.6-2.5-3.4c-0.8-0.8-2-1.6-3.4-2.5c-1.5-0.8-3.2-1.2-5.3-1.2c-2.1,0-3.9,0.4-5.3,1.3
c-1.5,0.9-2.6,1.7-3.4,2.5c-0.8,0.8-1.6,2-2.5,3.4c-0.8,1.5-1.3,3.5-1.3,6v40.9L30.5,47c-2.7-2.4-5.3-3.7-7.7-3.7
c-2.4,0-4.5,0.6-6.4,1.9C14.5,46.5,12.9,48.1,11.6,49.9"/>
</clipPath>
</defs>
</svg>
.svg-shape {
clip-path: url(#svgPath);
height: 120px;
width: 100px;
background: linear-gradient(#58C2ED, #1B85DC);
}
Resultado
Utilizar animaciones sobre el svg
Podemos realizar animaciones dentro del área de corte mediante las animaciones dentro del mismo svg.
<div class="svg-shape-animated"><div>
<svg height="50" width="50">
<defs>
<clipPath id="svgPath2">
<circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40">
<animate
attributeName="r"
attributeType="XML"
from="0" to="250"
begin="0s" dur="3s"
fill="freeze"
repeatCount="indefinite"/>
</circle>
<circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576">
<animate
attributeName="r"
attributeType="XML"
from="0" to="250"
begin="0s" dur="3s"
fill="freeze"
repeatCount="indefinite"/>
</circle>
</clipPath>
</defs>
</svg>
.svg-shape {
clip-path: url(#svgPath2);
height: 120px;
width: 100px;
background: linear-gradient(#58C2ED, #1B85DC);
}
Resultado
Soporte en navegadores
La mayor limitación del uso de clip-path, es que la mayoría de las formas para utilizar no tienen soporte en internet explorer ni en edge, por lo que hay que tenerlo en consideración al pensar en el Cross Browsing de nuestro sitio. Podrán comparar el soporte de esta propiedad en los distintos navegadores aquí.