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创建带有阴影的三角形？

- at.

---

我的建议是：使用图片。我认为这是不可能的。 - Richard Marskell - Drackir

@Drackir，我希望我不必... - at.

嗯，这样做会更简单且跨浏览器兼容。 :) - Richard Marskell - Drackir

"img"或"canvas"可能更容易，但如果你想继续尝试其他的东西，你可以在曲线边缘上套用一个部分旋转的“div”，然后就会出现一大堆hack，但是没有图像或画布。 - Michael Haren

你可以尝试使用 text-shadow 并使用 Unicode 箭头 ◀ ▲ ▶▼。你可以使用 CSS transform: scale(x, y) 来改变宽度和高度。 - Kaspar Lee

Answer 1

看起来似乎不可能。使用图像绝对是更容易的解决方案。我做了一个类似三角形的东西 :) http://jsfiddle.net/5dw8M/109/。很抱歉无法在您的帖子下留言。也许它会为某些人提供灵感。

- ted

---

你的三角形实际上是一个四分之一圆形... 对于我的目的，我不能使用它。 - at.

我根据这个答案创建了一些东西，所以我要感谢你。 - at.

@at：你做了什么？我很感兴趣知道。 - Marcel

我使用水平半径50％和垂直半径100％使曲线部分更长，看起来更加笔直...虽然仍然不够好...只是临时措施。 - at.

Answer 2

您可以尝试添加另一个具有相似属性的div，并调整它们的位置。 类似于http://jsfiddle.net/eveevans/JWGTw/中的示例。

- eveevans

---

问题在于投影必须完全清晰，没有任何模糊的阴影。 - at.

这对我有用，有点像黑客，但至少现在我可以有一个透明的阴影。图片就做不到这一点。 - deweydb

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 Tricks页面摘录并做了修改。

- thebossman

---

但是你可以使用这个解决方案来编辑三角形的高度。这仅适用于等边三角形。 - yosafatade

@yosafatade 你可以尝试使用scale(2,1)来拉伸三角形，例如...？ - Kaspar Lee

Answer 4

或许最好的选择是使用filter：

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

- Mayko

Answer 5

使用带有PNG回退的<canvas>是否是一个选项？

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

- Marcel

---

我本不想使用画布，但看起来这可能是我的唯一选择。 - at.

Answer 6

创建一个三角形的副本，将其去色，使用CSS给它一个负的z-index值，最后使用CSS定位将其偏移。

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

- Web_Designer

---

这不是和eveevans的答案一样吗？ - at.