使用css的带阴影的三角形 CSS HTML代码

我需要这个三角形的阴影底面，就像3D效果一样。

试试这个，我想它会帮你的

。插入符号底部{
显示：内联块；
宽度：0；
身高：0；
内容：“；
边框顶部：10px实心#fff；
右边框：10px实心透明；
左边框：10px实心透明；
边框底部：10px实心透明；
位置：相对位置；
}
.插入符号底部：之前{
宽度：0；
身高：0；
内容：“；
边框顶部：10px实心#000；
右边框：10px实心透明；
左边框：10px实心透明；
边框底部：10px实心透明；
位置：绝对位置；
z指数：1；
顶部：-12px；
左：-10px；
}

.triangle{
宽度：100px；
高度：100px；
位置：相对位置；
溢出：隐藏；
盒影：0 16像素10像素-17像素rgba（0,0,0,0.5）；
}
.三角形：之后{
内容：“；
位置：绝对位置；
宽度：50px；
高度：50px；
背景：#999；
-webkit变换：旋转（45度）；
顶部：75px；
左：25px；
盒影：-1px-1px 10px-2px rgba（0,0,0,0.5）；
}

---

Hi post有点老了，但我用了一个例子。 用代码链接到

.triangle{
位置：相对位置；
背景色：白色；
不透明度：0.7；
文本对齐：左对齐；
}
.三角：以前，
.三角形：之后{
内容：''；
位置：绝对位置；
背景色：继承；
}
.三角形，
.三角：以前，
.三角形：之后{
宽度：7em；
高度：7公分；
边界右上角半径：30%；
}
.三角形{
变换：旋转（-90度）倾斜（-30度）比例（1.866）；
}
.三角：以前{
变换：旋转（-135度）倾斜（-45度）缩放（1.414，.707）平移（0，-50%）；
}
.三角形：之后{
变换：旋转（135度）倾斜（-45度）比例（.707，1.414）平移（50%）；
}
.三角形{
滤镜：投影（4px7px 10px rgb（0,0,0））；
-webkit过滤器：投阴影（4px7px 10px rgb（0,0,0））；
}

.caret-bottom
{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align:top;
    content: "";
    border-top: 9px solid #FFFFFF;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; 
    margin-top: 13px;
    margin-left: 4px;   
  }

<div class="caret-left"></div>