Как сделать эти фигуры?

Question

[Лобстер]

Если делать с помощью clip-path: polygon то это не кроссбраузерно и у него нет возможности добавить границу(можно было бы box shadow применить но всё же не кроссбраузерно). С помощью обычного css у меня тоже ничего не получилось. Ксли взять треугольник совместить с квадратом то нужно весь контент только в квадрат помещать, а как видите там где WEB DESIGN текст как раз находится на границе где будут соединяться квадрат и треугольник.

Как делать такие штуки?

Answer 1

[Андрей Б.]

https://jsfiddle.net/2Lt99dmd/

Comments

[Лобстер]

https://jsfiddle.net/0rw5ynje/ я нашел такое вот решение

[Андрей Б.]

Лобстер как вариант, но помните о нюансах поддержки таких единиц caniuse.com/#feat=viewport-units

Answer 2

[tommy_13]

есть два пути:
- посмотреть через консоль, как сделано на сайте
- border arrow

Comments

[Лобстер]

сайт бы еще такой найти. это макет я взял чтобы верстать

[tommy_13]

Лобстер: гугли в строну border arrow css. сразу пример - www.cssarrowplease.com

[Лобстер]

tommy_13: я был. это не то, но нашел то что нужно html-tuts.com/css-arrows-up-down-left-right-triangle (в самом конце)