Html 给右边框一个长方体阴影

我试图给我用css制作的三角形的边框加上一个方框阴影

#左上角三角形{
宽度：0；
身高：0；
边框顶部：300px纯蓝色；
右边框：100px实心透明；
}

---

您可以使用不同的方法创建三角形。在这里，我旋转并定位了一个

div

，它位于一个带有

overflow:hidden

您可以在旋转的

div

上设置所需的

框阴影

，并调整值以获得所需的外观

#左上角三角形{
宽度：300px；
高度：300px；
位置：相对位置；
溢出：隐藏；
}
#三角形左上div{
背景：蓝色；
宽度：100%；
高度：300px；
变换：旋转（290度）；
位置：绝对位置；
前-35%；
左-80%；
盒影：4px4x8px红色；
}

---

您可以使用

过滤器

css规则

#左上角三角形{
宽度：0；
身高：0；
边框顶部：300px纯蓝色；
右边框：100px实心透明；
过滤器：投影（3px 3px 3px hsla（0,0%，0,1））；
}

更新阴影（非纯色边框）。 您可以在这里组合

线性渐变
和伪元素


#左上角三角形{
宽度：100px；
高度：300px；
/*三角形的梯度*/
背景图像：线性渐变（至右下角，蓝色50%，透明50%）；
位置：相对位置；
}
#左上角三角形：后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
/*阴影梯度*/
背景图像：线性渐变（至右下角，
rgba（17,17,17,0.7）钙（50%-5px），
rgba（17,17,17,0）50%，
透明(50%),；
转换：转换（5px，5px）；
z指数：-1；
}
像这样的东西怎么样

#triangle-topleft {
  position: relative;
  width: 0;
  height: 0;
  border-top: 300px solid blue;
  border-right: 100px solid transparent;
}

#triangle-topleft::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 300px solid red;
  border-right: 100px solid transparent;
  transform: translate(5px, -100%);
  z-index: -1;
}

#triangle-topleft::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 5px;
  height: 15px;
  background-color: red;
  z-index: -1;
}

基本上，这是利用您拥有的并添加两个伪元素-
：：在
之前和
：：在
之后，绝对定位它们，然后应用变换

参考链接：
您希望一个边框有一个边框..那么没有。
放置阴影
可能….或者使用渐变或伪元素。