问题三角形的CSS框阴影

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

11772

2018-03-16 21:59

起源

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

@Drackir，我希望我没有...... - at.

嗯，它会更简单，跨浏览器兼容。 :) - Richard Marskell - Drackir

img 要么 canvas 可能更容易，但如果你想继续尝试，你可能会做那个四分之一圆的东西加上部分旋转 div 顶部弯曲的边缘。然后你会破解黑客但没有图像或画布 - Michael Haren

@Michael Haren，部分轮换 div？这是如何运作的？ - at.

答案:

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

2018-03-16 22:21

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

我根据这个答案创造了一些东西，所以我给你的信任 - at.

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

我使用50％的水平半径和100％的垂直半径使弯曲部分更长，使它看起来更直......但仍然不够好......只是一个临时措施。 - at.

怎么样把另一个具有相似属性的div和玩位置玩？就像是 http://jsfiddle.net/eveevans/JWGTw/

2018-03-16 22:22

问题是投影必须是完全锐利的，阴影根本就不模糊。 - at.

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

您可以使用“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技巧页面修改。

2017-10-30 22:28

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

@yosafatade你可以试试 scale(2, 1) 例如伸展三角形......？ - Druzion

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

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

2018-03-16 23:09

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

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

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

2018-03-16 23:15

这与eveevans的回答不一样吗？ - at.

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

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

2017-12-18 00:29

问题 三角形的CSS框阴影

答案:

热门问题

问题三角形的CSS框阴影