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

- Or Weinberger

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>

在三角形的transform rotate方面可以获得更多信息。

- web-tiki

---

我认为这是唯一的方法 +1 - Roko C. Buljan

这里有另一种使用:after伪元素的方法：链接。 - Weafs.py

@chipChocolate.py 基本上是相同的方式：您使用旋转来能够应用阴影。 - web-tiki

Answer 2

可以通过结合CSS变换和box-shadow来实现。但是我认为在这种情况下，skewX变换符号更加有能力。 这里有示例 -（由于简洁起见省略了供应商前缀）。

.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>

- Hashem Qolami

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>

- Alien