Html CSS三角形的一条边上的边框阴影

我有一个CSS三角形：

代码：

是否可以向其中一条边添加阴影，类似于此

---

您可以使用另一种方法对三角形应用长方体阴影：

正文{
溢出：隐藏；
}
div{
位置：绝对位置；
底部：0；
右：0；
高度：150像素；
宽度：213px；
背景：浅灰色；
-webkit转换来源：100%0；
-ms变换原点：100%0；
变换原点：100%0；
-webkit变换：旋转（-45度）；
-ms变换：旋转（-45度）；
变换：旋转（-45度）；
盒影：0px-3px5px0px 656565；
}

---

可以通过组合CSS变换和

框阴影来完成。然而，我认为在这种情况下，
skewX
transform表示法更有能力

-（由于简洁，省略了供应商前缀）


.triangle{
位置：绝对位置；
底部：0；右侧：0；
宽度：200px；
高度：200px；
溢出：隐藏；
}
.三角形：：之前{
内容：“；
显示：块；
宽度：100%；
身高：100%；
背景色：rgb（85,85,85）；
盒影：0.0 7px rgba（0,0,0,8）；
变换：skewX（-45度）；
变换原点：0.100%；
}
.文本{
颜色：#fff；
位置：绝对位置；
底部：0；右侧：0；
}

乱数假文。。。
如果您只想在右下角去掉阴影

有一个解决办法


*{margin:0px；padding:0px；}
.拐角处{
宽度：150px；
高度：150像素；
溢出：隐藏；
位置：绝对位置；
右：0px；下：0px；
}
.角落：以前{
背景：rgb（85,85,85）；
宽度：220px；
高度：220px；
变换：旋转（45度）；
利润率：48px；
盒影：0px 0px 10px#111；
底部：0px；
右：0px；
内容：''；
显示：块；
}
.text{位置：绝对位置；
z指数：2；
右：10px；
底部：10px；
颜色：#fff；}

特斯特
我认为这是唯一的方法+1是另一种方法使用
：在
：pseudo-element.@chipChocolate.py之后，基本上是相同的方法：使用旋转来应用阴影。
*,
*: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;
}