CSS框阴影周围三角形 [英] CSS box shadow around triangle

问题描述

我需要使用简单的html和CSS创建一个带阴影的三角形。回答另一个stackoverflow问题，我能够创建带有斜角边框的三角形。基本上，我创建一个框有一个非常宽的边框和附近一边有一个宽的透明边框的一面：

I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
}

工作得很好，但是当我尝试应用盒子阴影围绕正方形...不是三角形：

works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:

div.triangle {
    border-bottom : 60px solid transparent;
    border-left : 60px solid black;
    -webkit-box-shadow: 0 0 10px black;
}

如何只使用css / html和阴影才能得到一个三角形？

How do I get a triangle using only css/html with a drop shadow?

推荐答案

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

Seems like impossible. Definitely using an imagine is much more easier solution. I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;

这篇关于CSS框阴影周围三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！