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
Eliminar el borde azul del botón css de estilo personalizado en ChromeInternet Explorer @ font-face está fallando¿Cómo animar el texto de escritura a mano en la página web usando SVG?¿Cómo hacer que un elemento de bloque en línea llene el rest de la línea?Alternativa de CSS CalcCómo hacer que el menú desplegable de Twitter Bootstrap se desplace en lugar de hacer clicSelector de CSS3: primero en su tipo con nombre de clase?Bootstrap: cómo configurar el ancho fijo para ?