三角形周围的CSS框阴影答案

【问题标题】：CSS box shadow around triangle三角形周围的CSS框阴影
【发布时间】：2011-07-16 23:37:54
【问题描述】：

我需要使用简单的 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 获得三角形？

【问题讨论】：

我的建议：使用图片。我认为这是不可能的。
@Drackir，我希望我不必...
嗯，它会更简单并且跨浏览器兼容。 :)
img 或 canvas 可能更容易，但如果你想继续尝试，你可以做四分之一圆的事情，加上部分旋转的 div 在弯曲的边缘上方。然后，您将在 hack 上进行 hack，但没有图像或画布
@Michael Haren，部分旋转了div?它是如何工作的？

标签： html css shadow

【解决方案1】：

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

【讨论】：

你的三角形实际上是四分之一圆......出于我的目的，我不能使用它。
我根据这个答案创建了一些东西，所以我要感谢你
@at：你做了什么？我很想知道。
我使用 50% 的水平半径和 100% 的垂直半径使弯曲部分更长，使它看起来更直......虽然仍然不够好......只是一个临时措施。

【解决方案2】：

如何放置另一个具有相似属性的 div 并使用位置？类似http://jsfiddle.net/eveevans/JWGTw/

【讨论】：

问题是阴影必须完全清晰，阴影一点也不模糊。
这对我有用，有点小技巧，但至少我现在可以有一个透明的阴影。图像无法做到这一点。

【解决方案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 提升并进行了修改。

【讨论】：

但您可以使用此解决方案编辑三角形的高度。这仅适用于等边三角形。
@yosafatade 你可以尝试scale(2, 1) 来拉伸三角形...？

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

是否可以选择带有 PNG 后备的 <canvas>？

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

【讨论】：

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

【解决方案6】：

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

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

【讨论】：

这不是和eveevans的回答一样吗？