DOKRY Desarrollo
  1. DOKRY Desarrollo
  3. Cómo agregar borde en mi clip-path: polygon (); Estilo CSS

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"); } 
     M

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
Animación de agua de relleno¿Tenemos que usar prefijos de proveedores CSS no estándar / específicos del navegador?Invierte la esquina redondeada en CSS: el selector not () no se comporta de la misma manera entre Safari y Chrome / FirefoxSombra paralela de SVG usando css3Eliminar el espacio en blanco debajo de la imagenAnidar reglas @media en CSS¿Por qué se usan espacios para separar cosas en css?