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

您可以使用＆＃34;转换＆＃34;将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后备广告？

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

Answer 5

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

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

Answer 6

可能最好的选择是使用filter：

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

三角形周围的CSS框阴影

6 个答案: