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

Question

[Koreetz Koreetz]

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

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

Comments

[Mikhail Osher]

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

Answer 1

[dom1n1k]

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

Comments

[Koreetz Koreetz]

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

Answer 2

[GaserV]

css after

Answer 3

[Alex Sokol]

transform: skewX()

Answer 4

[Vadim Bogomazov]

jsFiddle

Comments

[Максим]

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

[Koreetz Koreetz]

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

[Максим]

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

[Koreetz Koreetz]

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

[Максим]

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