CSS3 Box shadow to half div

Question

I want to apply a window shadow to only half a div. I searched a lot on Google but couldn’t. Here is the code for a simple window shadow.

<style type="text/css"> div{ width: 200px; height: 200px; text-align: center; background-color: gray; margin: auto; font-size: 30px; box-shadow: 0 100px 5px 5px; } </style> <div>Sometimes by losing a battle you find a new way to win the war.</div> 

Encoded:

It is required:

Barrels with thanks in advance ...

Answer 1

To achieve this, you can apply box-shadow to its element :after : a pseudo-element.

 div { width: 200px; height: 200px; text-align: center; background-color: gray; margin: auto; font-size: 30px; position: relative; } div:after { position: absolute; content: ''; width: 100%; height: 50%; /* Half of the original height */ top: 0; left:0; box-shadow: 0 100px 5px 5px; z-index: -1; } 

 <div>Sometimes by losing a battle you find a new way to win the war.</div>