Mezclar una sombra paralela a la perfección

Necesito aplicar sombra a un borde superior, sin embargo, hasta ahora he creado la sombra con CSS y, dado que el borde superior está formado por dos cuadros, la sombra se superpone.

Mi solución a esto es cubrir la parte superpuesta con una imagen que parece una mezcla perfecta, sin embargo, no estoy seguro de cómo deberían verse las sombras cuando se encuentran así. Por favor vea el área del círculo azul.

¿Cómo se combinaría esta parte si fuera un objeto natural? ¿Desde un punto de vista artístico?

¿Cómo puedo averiguar cómo se vería la mezcla de sombras natural en un ejemplo como este?

Puedo usar Adobe Photoshop o GIMP para lograr esto.

Me gusta la idea de rediseñar la estructura, tal vez dos cajas para el lado conectadas por una tercera caja para la parte superior... Ya veré... ¡Gracias!

Respuestas (2)

Aquí está mi solución. Creo que es la única forma de hacerlo en CSS y obtener costuras limpias entre las sombras paralelas. Utilicé las cajas transparentes azules porque el problema con el que te habrías topado con el método de la sombra interna es que las costuras de las esquinas/la curvatura de la sombra no habrían coincidido donde se encuentran las cajas verde y negra.

ingrese la descripción de la imagen aquí

Debería haber mencionado que necesitará usar z-index para superponer todos los divs en el orden correcto.
Gracias John, esto requiere más trabajo, ¡pero creo que realmente va a funcionar! ¡Gracias!

Una sombra natural sería esencialmente una extensión del borde naranja.

Esta es una maqueta rápida que necesita más refinamiento:

sombra

En términos de CSS, debe extender el cuadro que sobresale para cubrir la sombra en el elemento inferior y luego eliminar la sombra insertada en el borde inferior de la protuberancia.

Gracias por la respuesta rápida. Bueno, si extendemos la caja que sobresale con su sombra en el costado, ¿la sombra en ambos lados no seguirá mostrando un marcado contraste con la sombra del elemento inferior? Dado que la sombra va de oscuro a claro de lado, mientras que para el elemento inferior va de arriba a abajo...
Sí. No estoy seguro de poder lograr esto con CSS3. Pero no soy un experto en sombras de cajas CSS3.
pon otro div allí y úsalo para enmascarar las sombras. Simplemente configure el índice z y colóquelo para que se extienda más abajo que el cuadro. Sin embargo, no creo que esto le dé una costura limpia donde la sombra se encuentra en las esquinas.
Mezclar una sombra paralela a la perfección
RespuestasAquíPolítica de privacidad1y, 2v