边框阴影在CSS三角形的一个边缘上

Question

我有这个CSS三角形:

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

码:

*,
*: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;
}

是否可以在其中一个边缘添加阴影,类似于此？

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

Answer 1

您可以使用另一种方法使三角形能够应用框阴影:

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>

有关变换旋转的三角形的更多信息