Border shadow on one edge of a CSS triangle

Question

I have this CSS triangle:

http://codepen.io/orweinberger/pen/myEoVa

CODE:

*,
*:before,
*:after {
  box-sizing: border-box;
}
.triangle {
  position:absolute;
  bottom:0;
  right:0;
  display: inline-block;
  vertical-align: middle;
}
.triangle-0 {
  width: 200px;
  height: 200px;
  border-bottom: solid 100px rgb(85,85,85);
  border-right: solid 100px rgb(85,85,85);
  border-left: solid 100px transparent;
  border-top: solid 100px transparent;
}

.text {
  color:#fff;
  position:absolute;
  bottom:0;
  right:0;
}

Is it possible to add a shadow to one of the edges, similar to this?

http://codepen.io/orweinberger/pen/ByzbKX

Answer 1

You can use another approach for the triangle to be able to apply a box-shadow to it :

body {
  overflow: hidden;
}
div {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 150px;
  width: 213px;
  background: lightgrey;
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin: 100% 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-shadow: 0px -3px 5px 0px #656565;
}

<div></div>

More info here on triangles with transform rotate