Html 为三角形div创建阴影

如何为三角形div创建阴影？这是我正在尝试的一个代码

Html

此代码为div标记创建方形阴影。现在我们如何为这个div标记创建三角形阴影

HTML

CSS

。带阴影的三角形{
宽度：100px；
高度：100px；
位置：相对位置；
溢出：隐藏；
盒影：0.16px 10px-17px rgba（0,0,0,0.5）；
}
.带阴影的三角形：之后{
内容：“；
位置：绝对位置；
宽度：50px；
高度：50px；
背景：#999；
变换：旋转（45度）；
顶部：75px；
左：25px；
盒影：-1px-1px 10px-2px rgba（0,0,0.5）；
}
.带阴影的三角形：悬停，.带阴影的三角形：悬停：之后{
盒影：无；
}

---

HTML

▼

CSS

.triangle{
颜色：红色；
字体大小：100px；
文本阴影：0 0px 10px黑色；
}

另一个选择，在某些方面肯定更好，就是使用

过滤器：drop-shadow（）

这将模仿形状来制作一个过滤器，我不是开玩笑的，它会模仿到一个T恤。这不仅会跟随对象，还会跟随对象上的伪元素

以下是
CSS
：

#triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
}

常规问题


用伪元素



主要考虑因素是浏览器支持，目前Webkit是唯一受支持的浏览器。
这将不起作用。。左/右在那里（他们获得了他们的空间，但不可见）。所以阴影是矩形的。您可以搜索基于svg的解决方案……这基本上是一个仅链接的答案。你真的应该从这个URL中提取一些东西，并在你的答案中使用它。链接会断开，如果断开，您的答案将一文不值。我继续编辑了它，以向您展示如何通过包含链接中使用的代码使您的答案更具信息性。谢谢：）我是stackoverflow的新手：）我将边走边学习：）
 #triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     box-shadow: 1px 1px 5px #000;
 }

#triangle-down {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid red;
     filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
}

#triangle-down {
    width: 300px;
    height: 200px;
    background: red;
    position: relative;
    filter: drop-shadow(0 5px 10px black);
     -webkit-filter: drop-shadow(0 5px 10px black);
     -moz-filter: drop-shadow(0 5px 10px black);
     -o-filter: drop-shadow(0 5px 10px black);
     -ms-filter: drop-shadow(0 5px 10px black);
} 

#triangle-down:before {
    content: "";
     width: 0;
     height: 0;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-top: 30px solid red;
     position: absolute;
     top: 100%;
     left: 50%;
 }