Cómo agregar borde en mi clip-path: polygon (); Estilo CSS

Deseo saber si es posible agregar border en mi clip-path:polygon(); estilo o de alguna otra manera de agregar borde?

como: border:5px solid red;

CSS

 .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%); -moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%); }

HTML

¿Se puede aplicar borde a un elemento recortado a lo largo de la ruta del clip?

No, al agregar propiedad de border al elemento recortado no se aplicarán los bordes a lo largo de la ruta recortada porque el border se aplica al contenedor original de rectángulo (o cuadrado) antes de aplicar la clip-path y, por lo tanto, también se recorta. Puedes ver esto en el siguiente fragmento:

 div { display: inline-block; height: 200px; width: 200px; border: 3px solid; background: darkseagreen; } div + div { -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%); }

Agregar un borde a una ruta de clip compleja con filtro de dilatación SVG

El método Copy-Shrink solo funciona en casos simples: se usa en la respuesta actualmente aceptada

La respuesta actualmente aceptada funciona haciendo una copia y reduciéndola. Esto funciona para el ejemplo, pero si tiene una forma más compleja (como texto), no funcionará. Un mejor enfoque es usar la dilatación con un filtro.

La dilatación de la forma funciona en CUALQUIER forma

¡Un mejor enfoque es usar la dilatación con el filtro de feMorfología!

Filtro de feMorfología SVG

Aspectos clave:

Cree formas y coincidentes de igual altura y ancho
Clip ambos con la ruta / polígono de forma deseada
Use el filtro para dilatar / agrandar el rect recortado para hacer un borde

El radius= filtro radius= convierte en el soporte para el grosor del borde.

El resultado:

enter image description here

 .clipper{ clip-path: url(#clip_shape); } .dilate{ filter: url("#dilate_shape"); }

Pseudo-Elemento

Una buena forma de hacerlo sería con un pseudo-elemento como a :before

Haga exactamente la misma forma pero un poco más pequeña que contenga el color principal que desea y colóquelo correctamente y obtendrá el borde que desea.

El siguiente ejemplo no es la forma correcta pero muestra cómo lograr este efecto:

 .shape { width: 400px; height: 40px; background-color: black; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); position: relative; } .shape:before { content: ''; width: 398px; height: 38px; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); background: green; display: block; position: absolute; top: 1px; left: 1px; }

Tengo otra solución para esto …

Esto es en lo que estoy trabajando: enter image description here

 .top-angle-left { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); position: relative; } .top-angle-left:after { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%); clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%); background: #e99d15; content: ''; position: absolute; left: 0; top: -82%; right: 0; height: 100%; display: block; z-index: 9; }

La idea de que el elemento: after puede escalar SIEMPRE con el contenedor principal, por lo que ahora es 100% sensible. Esto solo se logra aplicando la parte superior negativa al elemento: after. Espero que esto sea útil !!

He aquí cómo hacerlo.

Simplemente agregue la máscara duplicada y agregue un relleno al padre.

 .screenshot { mask: url(../assets/img/bubble.svg) center center no-repeat; background: white; padding: 10px; img { mask: url(../assets/img/bubble.svg) center center no-repeat; } }

Intereting Posts

@Media min-width & max-width Retardo: desplázate en CSS3?Navegador cruzado de rotación de CSS con jquery.animate ()¿Cómo hago un trabajo de fondo en IE?¿Puedo fundirme en una imagen de fondo (CSS: background-image) con jQuery?¿Cómo funciona la especificidad de CSS?Cómo rotar texto en css Mantener el estado final al final de una animación CSS3