¿Cómo puedo crear este borde de forma irregular con CSS puro (sin imágenes)?

12

Estoy tratando de evitar el uso de una imagen de fondo (o cualquier solución basada en imágenes) para crear esto de manera efectiva:

borde irregular

Nota: la flecha roja solo apunta al borde en cuestión. La flecha no debe incluirse en su respuesta.

¿Cómo puedo crear este borde de forma irregular con CSS puro (sin imágenes)? Si las imágenes son inevitables, la respuesta más concisa y legible será votada y aceptada.

css borders

— Micah Bolen
fuente

12

Puede usar CSS (teniendo en cuenta que esto no funcionará con versiones anteriores de IE).

Por ejemplo, podría combinar algunas formas como un rectángulo y dos triángulos. Ver este jsfiddle .

ingrese la descripción de la imagen aquí

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

Y el CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

Puede ver una variedad de formas CSS aquí . La mayoría, si no todos, requieren más de un div, por lo que el desafío sería aplicar un borde más oscuro.

— Yisela
fuente

¿Hay alguna manera de hacer esto donde el polígono usa un ancho basado en porcentajes?

— Micah Bolen

Usando el enfoque de Yisela, puede hacer el triángulo con un div (borde izquierdo y borde derecho con 1/2 del ancho del cuadrado; el borde superior = altura deseada; y agregar un margen superior de (-1 * borde superior) . Debería agregar un valor de relleno al cuadrado para evitar que el texto lapee el triángulo.

— Horatio

2

Puede poner estas formas adicionales en pseudo-elementos :beforey :aftermantener su html'limpio'. El :beforesería el triángulo izquierdo, :afterel derecho.

— Vincent

7

La respuesta de Yisela es sólida, pero pensé que ofrecería esta alternativa: usar un polígono o un URI de imagen con formas CSS y ruta de recorte. Aquí hay un tutorial rápido .

Tenga en cuenta que este método funcionará con incluso menos navegadores que el truco del borde del triángulo en este momento. Sin embargo, si desea utilizar una forma más compleja o ajustar su texto a la forma, este será el camino a seguir.

captura de pantalla de demostración

— Joey Cordes
fuente

Parece que esta solución incluso funcionaría si necesitara el polígono para usar un ancho basado en porcentajes. Quizás, por medio de la vwunidad CSS . ¿Eso suena posible?

— Micah Bolen

2

Otro método para esto que también puede tener soporte limitado es "SVG incrustado en CSS". No lo he intentado yo mismo, pero la idea es que proporcione un recurso de imagen como una url dentro de la declaración css para el objeto y le pase una url con escape adecuado que contenga los datos.

SVG es un formato de texto plano / xml. Un ejemplo de polígono (de w3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Un ejemplo SVG en línea (incrustado) (simplificado) (de stackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

Tenga en cuenta que los datos SVG deben "escaparse" correctamente para su uso en línea, lo que lo hace un poco menos atractivo que simplemente vincular un archivo SVG.

Existe cierta discusión sobre la viabilidad del método en el hilo vinculado anterior. Creo que incrustar algo tan simple como un triángulo relleno de blanco es una decisión fácil siempre que haya soporte. Los datos complejos en formato SVG deben almacenarse como un archivo SVG en lugar de en línea.

Los archivos SVG son vectoriales y se pueden escalar por porcentaje, a diferencia del método de "bordes". También (actualmente) tienen un mejor soporte (al menos no en línea) que el método de trazado de recorte enumerado. SVG, al ser texto sin formato, incluso se puede emitir sobre la marcha utilizando, por ejemplo, PHP u otras secuencias de comandos del lado del servidor.

— Horacio
fuente

0

Si su área azul en la imagen es un png transparente y el área blanca es transparente, entonces debe incluir este html para que suelte sombras:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Y usa este CSS en la imagen:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Esta es una solución perfecta para todos los navegadores.

— bogatyrjov
fuente