Как сверстать такой блок или как сверстать треугольную кнопку?

Question

[Chainees]

Здравствуйте, помогите пожалуйста, как сверстать такой блок?


Вопросы вызывает кнопка треугольного типа, как ее реализовать?
Через svg или clip-path?

Comments

[Виталий Киренков]

Простым ксс

Answer 1

[Ragtime Kitty]

Да. сделать кнопку "треугольного типа" проще всего через clip-path и polygon
e.g https://jsfiddle.net/jhbxk9es/

Но чтобы стилизовать, вот как на картинке, нужно уже рисовать полигон в SVG.

Comments

[dom1n1k]

Не проще, к сожалению. Потому что тень тоже обрежется.

[Chainees]

Отлично, спасибо, а как обстоят дела с адаптацией под мобильники?

[Chainees]

dom1n1k, а как лучше реализовать?

[dom1n1k]

Ну видимо, svg-картинкой.

[Виталий Киренков]

То есть, отсутствие закруглённых углов - норм?

[Ragtime Kitty]

Chainees, у мобильных браузеров с clip-path polygon проблем нет

Answer 2

[Юрий Есин]

Учитывая, что в CSS3 можно не только геометрические примитивы рисовать, но еще и полноценные шейдеры видеокарты с нуля писать и применять в визуализации, в вашем распоряжении куда больше возможностей, чем просто внедрение SVG в разметку шаблона на уровне 1998го года. Но касательно вашей задачи, она легко решается в рамках стандартного CSS всего за одни сутки, и поможет вам в решении псевдоселектор ::after. Задайте ему необходимую высоту, градиентный бэкграунд, box-shadow и главное - border-параметры в правильном формате, и вы на выход получите готовое универсальное решение без применения векторной графики. Примеров реализации треугольной кнопки в гугле можно найти тысячи, это уже давно тривиальная задача. Вам лишь остаётся адаптировать имеющиеся решения под свой требуемый формат задачи.

Comments

[Максим Тимофеев]

но еще и полноценные шейдеры видеокарты с нуля писать

а поддержка браузерами?

[Юрий Есин]

Максим Тимофеев, все браузеры, поддерживающие CSS3, на данный момент прекрасно дружат и с шейдерами. Наверное, потому что технология появилась еще лет 11 назад.