Efecto de línea de hendidura a través de CSS

Question

¿Alguien sabe de una forma de crear una de estas líneas (consulte la imagen) en CSS?

Answer 1

Aquí es una aproximación para empezar. Tendrá que ajustar los detalles. Básicamente, lo que he hecho es crear un div saliente, y debajo hay un div que creará una sombra con una caída en los extremos. El div saliente se encuentra en una capa más alta para que solo vea el borde de la sombra.

Demostración: http://jsfiddle.net/X5muV/

Otro más, un poco más oscuro:http://jsfiddle.net/X5muV/1/

HTML:

<div id="container"> 
    <div id="overhang"></div> 
    <div id="falloff-shadow"></div> 
</div> 

CSS:

#container { 
     background: #5A5A5A; 
     width: 700px; 
     padding: 200px 0 80px 0px; 
    } 
    #overhang { 
     background: #5A5A5A; 
     border-top: 1px solid #666; 
     height: 80px; 
     width: 600px; 
     margin: 0 auto; 
     position: relative; 
     z-index: 5; 
    } 
    #falloff-shadow { 
     width: 500px; 
     margin: 0 auto; 
     -webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1); 
     position: relative; 
     z-index: 1; 
     height: 1px; 
     top: -65px; 
    } 

Answer 2

Sí, puede crear eso en css3. Tendrás que combinar algunos efectos, pero creo que una línea gris (tendrás que agregar un espacio adicional a continuación, explicado más adelante) con una sombra hará.

Para escribir una sombra que aparece sólo en un lado (arriba), compruebe esta pregunta/respuesta: How can I add a box-shadow on one side of an element?

Sobre la base de ese ejemplo, se puede intentar algo como:

.myDiv 
{ 
    width: 700px; 
    height: 50px; 
    border-top: 2px solid #333; 
    -webkit-box-shadow: 10px 0px 0px -2px #888 ; 
} 

La sombra es sigue ahí a la izquierda, pero escondido (-2px). Eso te da la ilusión de una sola sombra. Esto es solo una puesta en marcha, pruebe diferentes opciones y regrese si tiene alguna pregunta en particular. Pero hazlo tú primero.