Cómo obtener sombra de cuadro solo en los lados izquierdo y derecho

¿Alguna forma de obtener sombra de cuadro en los lados izquierdo y derecho (¿horizontal?) Solo sin trucos ni imágenes. Estoy usando:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Pero da sombra por todos lados.

No tengo fronteras alrededor de los elementos.

Aug 17 '12 06:08 Jawad

No estaba satisfecho con la parte superior e inferior redondeadas de la sombra presente en la solución de Deefour, así que creé la mía propia.

inset box-shadowcrea una bonita sombra uniforme con la parte superior e inferior cortadas.

Para utilizar este efecto en los lados de su elemento, cree dos pseudoelementos :beforey :aftercolóquelos absolutamente a los lados del elemento original.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

Editar

Dependiendo de su diseño, es posible que pueda utilizar clip-path, como se muestra en la respuesta de @Luke. Sin embargo, tenga en cuenta que en muchos casos esto todavía da como resultado que la sombra disminuya en la parte superior e inferior. Esta reducción es sutil y, dependiendo de su combinación de colores y radio de desenfoque, puede que la encuentre aceptable. En este ejemplo, agregué un segundo cuadro para que el cono sea más fácil de ver:

div {
  width: 100px;
  height: 50px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div>1</div>
<div>2</div>

Jun 26 '2013 14:06 Hamish

Difusión negativa y sombra de enmascaramiento.

CSS box-shadow utiliza 4 parámetros h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

El blurparámetro agrega el efecto de degradado, pero también agrega una pequeña sombra en los bordes superior e inferior. Para deshacernos de este efecto secundario podemos utilizar:

• Negativo spreadreduce la sombra en todos los bordes: puedes jugar con él intentando eliminar esa pequeña sombra vertical sin afectar demasiado la de los lados (es más fácil para sombras pequeñas, de 5 a 10px).

• Enmascarar sombras del mismo color del fondo (blanco en este caso), lo que permite crear sombras de ticker. Tenga en cuenta que esta sombra de enmascaramiento debe tener un desenfoque = 0 para cubrir completamente los efectos secundarios.

Aquí dos ejemplos, el segundo usa Sombra de enmascaramiento:

div{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    margin: 10px;
    float: left;
}
#example1{
    box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
    box-shadow: 
        0 -6px white,
        0 6px white, 
        -7px 0 4px -3px black, 
        7px 0 4px -3px black;
}

<div id="example1"></div>
<div id="example2"></div>

Si ninguno de estos enfoques se adapta a sus necesidades, también puede agregar un div absoluto al lado de cualquier div existente.

Solo recuerde configurar el div del contenedor para position: relativeque este div absoluto permanezca dentro.

#example3 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid green;
}

.shadow {
  position: absolute;
  height: 100%;
  width: 4px;
  left: 0px;
  top: 0px;
  box-shadow: -4px 0 3px black;
}

<div id="example3">
  content here
  <div class="shadow"></div>
</div>

Jul 01 '2014 16:07 T30