Как сделать такие края у DIV элеиента с помощью CSS?

Question

[PageUp]

Подскажите, пробовал по западным мануалам border-left-color:transparent; Но все выходит как то криво и ужасно. Как сделать такие края у дива с минимумом лишнего кода?

Вот сам DIV

.classb {
font-family: "Palatino Linotype","Times",serif;
font-weight:normal;
color:#FAF8EB;
background-color: #938373;
background-image: url(../img/img-b.png);
margin-bottom:2px;
padding:2px;
padding-left:6px;
text-shadow: none;
}

Comments

[Rustam Bainazarov]

Если только clip-path.

Border'ом получается весьма недурно, нужно только знать высоту элемента.

Answer 1

[Виталий Першин]

При помощи clip-path это делается просто и эффективно, а в случае отсутствия поддержки в каком-либо старом браузере, самое худшее что случится, будет просто кнопка без уголка:

Comments

[PageUp]

А как будет выглядеть не с левой, а с правой стороны?
Я так понимаю, это какой то новый вообще атрибут, о нем даже справки нет толковой :)

[Rustam Bainazarov]

PageUp, справка по этому свойству есть более чем полноценная. Введите его название и всё увидите.

Можете в визуальном конструкторе поиграться с ним:
https://bennettfeely.com/clippy/

[PageUp]

Спасибо вам огромное, помогли. А то что на старых браузерах не поддерживает, не беда, надо смотреть в будущее, а не в прошлое :)