三角形周围的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);
}​

Demo on jsfiddle.

从this CSS Tricks page解除了修改。

Answer 4

<canvas>可以选择PNG后备吗？

但是：ぁzxswい

Answer 5

创建该三角形的副本，对其进行消色处理，使用css为其赋予负z-index值，最后使用CSS定位将其置于中心位置。

jsfiddle.net/Marcel/3dbzm/1

Answer 6

可能最好的选择是使用

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

：

filter