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

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:

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.

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 .

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.

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.

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.

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.