Нелинейная тень в дизайне HTML

Question

Нелинейная тень в дизайне HTML

Я пытаюсь создать тень, которая более широка в вершине как в изображении ниже. Это не должен быть очень перекрестный браузер, недавний Firefox и основанный на WebKit браузер сделают очень хорошо. У кого-либо есть какие-либо хорошие идеи о том, как сделать это?

shadow

1

html html5 canvas css3

задан Community 8 February 2017 в 14:28

4 ответа

Другие вопросы по тегам:

html html5 canvas css3

Похожие вопросы:

score 1 · Answer 1

Вы можете попробовать поработать с box-shadow и функцией skew свойства transform. Может быть, поместить прозрачный div с box-shadow под элементом содержимого, например:

#shadow{
    -webkit-transform: skewY(-10deg);
       -moz-transform: skewY(-10deg);
         -o-transform: skewY(-10deg);
            transform: skewY(-10deg);
    -webkit-box-shadow: 4px;
       -moz-box-shadow: 4px;
         -o-box-shadow: 4px;
            box-shadow: 4px;    
}

score -1 · Answer 2

фотошоп или канитель, который вам нравится

-1

ответ дан 2 September 2019 в 23:08

score 0 · Answer 3

Я только что писал о чем-то подобном .

0

ответ дан 2 September 2019 в 23:08

score 2 · Answer 4

Я еще не пробовал эту технику, но CSS3 включает свойство border-image, как описано здесь . Возможно, если вы разработали свою собственную тень, вы могли бы установить ее в качестве границы (или использовать элемент оболочки с такой рамкой).