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

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

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

отлично работает, но когда я пытаюсь применить box-shadow, тень идет вокруг окружающего квадрата... не треугольника:

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

Как получить треугольник, используя только css/html с тенью?


html css shadow
person at.    schedule 16.03.2011    source источник
comment
Мое предложение: используйте изображение. Я не думаю, что это возможно.   -  person Richard Marskell - Drackir    schedule 17.03.2011
comment
@Drackir, надеюсь, мне не придется...   -  person at.    schedule 17.03.2011
comment
Ну, это было бы проще и совместимо с браузерами. :)   -  person Richard Marskell - Drackir    schedule 17.03.2011
comment
img или canvas, вероятно, проще, но если вы хотите продолжать пробовать что-то новое, вы можете сделать четверть круга плюс частично повернутый div поверх изогнутого края. Тогда у вас будет взлом за взломом, но без изображения или холста   -  person Michael Haren    schedule 17.03.2011
comment
@Майкл Харен, частично повернутый div? Как это работает?   -  person at.    schedule 17.03.2011
comment
Это не невозможно Посмотрите на мой ответ.   -  person Web_Designer    schedule 17.03.2011
comment
@inquisitive, я ответил на твой ответ. Проблема в том, что я просто не могу получить приличную тень таким образом (что более важно, она не соответствует теням окружающих элементов на моем сайте).   -  person at.    schedule 17.03.2011
comment
Я надеюсь, что это поможет ... Это все, что я могу придумать, если это не так, я бы предложил использовать холст или изображение. jsfiddle.net/5dw8M/117   -  person Web_Designer    schedule 17.03.2011
comment
@inquisitive, я не понимаю этот пример   -  person at.    schedule 17.03.2011
comment
Можете ли вы опубликовать изображение рендеринга, на который вы надеетесь? Различные методы применяются к немного различным случаям.   -  person Lea Verou    schedule 17.03.2011
comment
Вы можете попробовать text-shadow и использовать стрелку Unicode ◀ ▲ ▶▼. Вы можете использовать CSS transform: scale(x, y) для изменения ширины и высоты.   -  person Kaspar Lee    schedule 28.02.2016

Ответы (6)


arrow_upward
6
arrow_downward

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

person ted    schedule 16.03.2011
comment
Ваш треугольник на самом деле четверть круга... для моих целей я не могу его использовать. - person at.; 17.03.2011
comment
Я создал что-то на основе этого ответа, поэтому я отдаю вам должное за это. - person at.; 17.03.2011
comment
@at: что ты сделал? Мне было бы интересно узнать. - person Marcel; 17.03.2011
comment
Я сделал изогнутую часть длиннее, используя радиус по горизонтали 50% и радиус по вертикали 100%, чтобы она выглядела более прямой... хотя все еще недостаточно хорошо... просто временная мера. - person at.; 18.03.2011

arrow_upward
4
arrow_downward

Как насчет того, чтобы поставить еще один div с аналогичным свойством и поиграть с позициями? что-то вроде http://jsfiddle.net/eveevans/JWGTw/

person eveevans    schedule 16.03.2011
comment
Проблема в том, что тень должна быть абсолютно резкой, в тени вообще нет размытости. - person at.; 17.03.2011
comment
Это сработало для меня, что-то вроде хака, но, по крайней мере, теперь у меня может быть прозрачная тень. изображения просто не могут этого сделать. - person deweydb; 09.10.2014

arrow_upward
4
arrow_downward

Вы можете использовать свойство «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 с изменениями.

person thebossman    schedule 30.10.2012
comment
но вы можете изменить высоту треугольника с помощью этого решения. это только для равностороннего треугольника. - person yosafatade; 10.01.2013
comment
@yosafatade Вы можете попробовать scale(2, 1), например, растянуть треугольник...? - person Kaspar Lee; 01.03.2016

arrow_upward
1
arrow_downward

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

Демонстрация: jsfiddle.net/Marcel/3dbzm/1

person Marcel    schedule 16.03.2011
comment
Я не хотел использовать холст, но, похоже, это мой единственный вариант. - person at.; 17.03.2011

arrow_upward
1
arrow_downward

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

div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}
person Web_Designer    schedule 16.03.2011
comment
Разве это не то же самое, что и ответ Ививанса? - person at.; 17.03.2011

arrow_upward
1
arrow_downward

Вероятно, лучший вариант — использовать filter:

filter: drop-shadow(0 0 10px black);
person Mayko    schedule 18.12.2017