Как сверстать следующую «Штуку» обрезанный треугольник?

Question

[Koreetz Koreetz]

Добрый день!
Вопрос наверно немного "тупой", подскажите как сверстать такие обрезанные углы у блока div.

Заранее спасибо!

Comments

[Mikhail Osher]

Эта штука называется "прямоугольная трапеция". Гуглится на раз-два.

Answer 1

[dom1n1k]

Ответ сильно зависит от подробностей и контекста.
- это кнопка, плашка или контейнер для текста?
- должен ли он ресайзиться?
- должен ли легко меняться цвет?
ну и так далее.

Comments

[Koreetz Koreetz]

Да это переключатель с текстом внутри, и hover у него имеется!

Answer 2

[GaserV]

css after

Answer 3

[Brasileiro]

codepen.io/Geyan/pen/xOYJrd?editors=110

Comments

[Koreetz Koreetz]

Без svg никак разве)

[Brasileiro]

Uzbek Родина она одна!: если без svg то при не однородном фоне будет видно

Answer 4

[Alex Sokol]

transform: skewX()

Answer 5

[Vadim Bogomazov]

jsFiddle

Comments

[Brasileiro]

не достаток этого метода jsfiddle.net/atlanta/6hwj9Le1/4

[Koreetz Koreetz]

А как сделат в нужную сторону)

[Brasileiro]

Uzbek Родина она одна!: могу только не для большого текста

[Koreetz Koreetz]

Максим Жаров: Текст в кнопке: Часть 1

[Brasileiro]

Uzbek Родина она одна!: мой пример ниже смотри