Тень CSS вокруг треугольника

Мне нужно создать треугольник с теневой тканью, используя простые html и css. Отвечая на другой вопрос stackoverflow, я смог создать треугольник с граничными границами. В основном я создаю 1 сторону коробки с очень широкой границей и соседней стороной с широкой прозрачной рамкой:

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 с тенью?

Ответ 1

Кажется, это невозможно. Определенно использование идеи намного проще. Я сделал что-то вроде треугольника:) http://jsfiddle.net/5dw8M/109/. Извините, не можете оставлять комментарии под своим сообщением. Может быть, это послужит вдохновением для кого-то,

Ответ 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);
}

Демо на jsfiddle.

Поднят из эту страницу CSS Tricks с изменениями.

Ответ 4

Будет ли <canvas> с резервным PNG вариантом?

Демо: jsfiddle.net/Marcel/3dbzm/1

Ответ 5

Создайте дубликат этого треугольника, обесцвечивайте его, дайте ему отрицательное значение z-индекса с помощью css и, наконец, отцентрируйте его с позиционированием CSS.

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

Ответ 6

Вероятно, лучшим вариантом является filter:

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