Как сделать треугольник?

Question

[DaniilPo]

нужно сделать вот такой треугольник с градиентом
нижняя часть скрывается за дивом но как сделать верхнюю + ещё сделать такой градиент?

Comments

[Василий Банников]

Мне кажется, это вообще картинка, а не градиент.

[Ankhena]

А может нужно что-то совсем другое?
И просто взять картинку целиком?

Ну или хотя бы показать целиком задачу?

[DaniilPo]

Василий Банников, вам не кажется, но задача стоит сделать этот элемет отдельно

[DaniilPo]

Ankhena, нет нужно сделать этот элемент отдельно и просто взять картинку целиком нельзя
задача целиком:
нужно сделать слайд шоу

spoiler

spoiler

spoiler

так что бы все элементы что вы видите на скриншотах были отдельно и их можно было бы редактировать
а с этим треугольником нужно что бы его можно было бы если что убирать или ставить
если что-то не понятно спросите я объясню
(работаю на wp)

[Ankhena]

DaniilPo, никто не мешает оставить этот треугольник в картинках, даже если они в слайдере.
И это будет вполне разумно.
Новые картинки для слайдеров всё равно нужно готовить.

Но если хочется, то псевдоэлементом. Повернете и обрежете.

[DaniilPo]

Ankhena, к сожалению не я решаю что и как делать, а за совет спасибо идея не плоха

Answer 1

[Александр Смирнов]

Для решения подобной задачи у вас несколько вариантов:

1. Использовать clip-path, но осторожно из-за ограниченной поддержки браузерами; почитать
   
2. Использовать mask-image, но также осторожно из-за ограниченной поддержки браузерами; почитать
   
3. Использовать SVG masks, у которого лучшая поддержка браузера, но реализация может занять больше времени, чем в остальных случаях; почитать
   
4. Создать необходимую фигуру псевдоэлементом, но такой способ работает только для фона залитого одним цветом
   
5. Просто добавить картинкой как есть
   

Таким образом, при выборе способа необходимо учитывать требования поддержки верстки браузерами, бюджет и сроки проекта. Мой совет: просто добавить порезанную картинку через background-image, если конечно ваша фигура не изменяет внешний вид при взаимодействии. Любой другой способ занимает сильно больше времени, либо заметно уменьшает список поддерживаемых браузеров, что позволяет в большинстве случаев отказаться от интерактивных свойств.