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

Question

我有这个CSS三角形：

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;
}

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

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>

triangles with transform rotate

上的更多信息

Answer 2

可以通过组合CSS变换和box-shadow来完成。但是我认为skewX变换符号在这种情况下更有能力。

Example Here - （由于简洁而省略了供应商前缀）。

.triangle {
  position:absolute;
  bottom:0; right:0;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.triangle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(85,85,85);
  box-shadow: 0 0 7px rgba(0,0,0,.8);
  transform: skewX(-45deg);
  transform-origin: 0 100%;
}

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

<div class="triangle"></div>
<div class="text">
    Lorem ipsum...
</div>

Answer 3

如果你只想在右下角出现阴影

有一个解决方案，

*{margin:0px; padding:0px;}
.corner{
width:150px; 
height:150px; 
overflow: hidden; 
position: absolute;
right:0px; bottom:0px;
}
.corner:before{
background:rgb(85,85,85); 
width:220px; 
height:220px;
transform: rotate(45deg);
margin: 48px;
box-shadow: 0px 0px 10px #111;
bottom: 0px;
right: 0px; 
content:''; 
display: block;
}
.text{position: absolute;
z-index: 2;
right: 10px;
bottom: 10px;
color: #fff;}

<div class="corner">

<div class="text">
  Tesdt
</div>
</div>