三角形周围的 CSS 框阴影

Question

我需要使用简单的 html 和 css 创建一个带有阴影的三角形。在另一个 stackoverflow 问题的回答中，我能够创建带有斜接边框的三角形。基本上，我创建了一个具有非常宽边框的盒子的一侧，并创建了具有宽透明边框的附近一侧：

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
}

效果很好，但是当我尝试应用盒子阴影时，阴影围绕着封闭的正方形...而不是三角形：

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
    -webkit-box-shadow: 0 0 10px black;
}

如何仅使用带有阴影的 css/html 获得三角形？

Answer 1

似乎不可能。绝对使用想象是更容易的解决方案。
我做了类似三角形的东西:) http://jsfiddle.net/5dw8M/109/ 。抱歉，无法在您的帖子下发表评论。也许它会成为某人的灵感；

Answer 2

放置另一个具有相似属性的 div 并调整位置怎么样？
类似于 http://jsfiddle.net/eveevans/JWGTw/

Answer 3

您可以使用“transform”属性将正方形旋转 45 度并隐藏其一半，但并非所有浏览器都支持它，因此您需要后备。

.triangle-with-shadow {
   width: 100px;
   height: 50px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   -ms-transform:rotate(45deg); /* IE 9 */
   -moz-transform:rotate(45deg); /* Firefox */
   -webkit-transform:rotate(45deg); /* Safari and Chrome */
   -o-transform:rotate(45deg); /* Opera */
   top: 25px;
   left: 25px;
   box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}​

jsfiddle 上的演示。

摘自 此 CSS 技巧页面 进行了修改。

Answer 4

也许最好的选择是使用过滤器：

filter: drop-shadow(0 0 10px black);

Answer 5

带有 PNG 后备的 是否是一种选择？

演示：jsfiddle.net/Marcel/3dbzm/1

Answer 6

创建该三角形的副本，对其进行脱色，使用 CSS 为其赋予负 z-index 值，最后使用 CSS 定位使其偏离中心。

div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}