Как сделать стрелку фоновой?

Question

[Erl]

Есть фон шага, и от этого фона вниз ведет стрелка и она должна быть фоном блока, сделал через :after, но бордеру дать фон нельзя (точнее можно но дает всему бордеру и даже если обрезать картинка в треугольнике будет отличаться от фона)
Вопрос, как можно сверстать это по другому?
может есть какие примеры подобного?

Answer 1

[Ankhena]

Это bennettfeely.com/clippy и это Как добиться такого эффекта для двух пересекающихся картинок?

Comments

[Erl]

я так понимаю, размер блока должен быть фиксированным?

[Ankhena]

Эрлан Капаров, если он не будет фиксированным, то уедет размер "уголков".

[cryolite]

Т.к фон повторяется, то мне кажется можно вывести полоску с помощью ::after и для него задать уже задать poligon в пикселях

[Erl]

cryolite, можно пример?
пока что сделал clip-pathом, и через медиа запросы адаптирую

Answer 2

[Илья Белобородов]

как-то так

.el:after {
border: 30px solid transparent;
border-top: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;
}

Comments

[Erl]

стрелка стала просто красной

Answer 3

[zoozag]

Можно попробовать сделать через mask-image, если поддержка браузеров устроит

Comments

[Erl]

clip-path, работает по такому же принципу же
не вижу особой разницы