This is div element has the 3-D effect. It seems as if you are looking at the element from a top angle. As you can see the "top" part of the element is darker to make the part of the element seem as if it is in the shadows. To create this effect we are using the CSS pseudo-element :before.
This is the same effect using the :after pseudo-element, and a paragraph HTML element. As you can see the effect is able to scale the size of the element itself.
As you see by changing the color of the background, we can make the element now appear as a box with the top opened.