3D Box Shadow effect

Question

So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below.

The effect I\'m trying to achieve is a 3D box shadow, as shown in

Answer 1

you can use pseudo element for as shadow

div {
  background: black;
  height: 100px;
  width: 100px;
  position: relative;
}
div:after,
div:before {
  content: '';
  background: grey;
  position: absolute;
}
div:after {
  width: 100%;
  height: 20px;
  left: 10px;
  bottom: 0;
  transform: translatey(100%) skewx(45deg);
}
div:before {
  width: 20px;
  height: 100%;
  right: 0;
  transform: translatex(100%) skewy(45deg);
  top: 10px;
}