Как сделать градиентную резиновую кнопку с косым краем (в виде трапеции) и закругленными углами?

Вот пример на картинке, как можно это реализовать? Желательно на чистом css?

Ответ

UPD. Вот кнопка с градиентом, скошенным краем и закруглёнными углами. Растягивается под содержимое.

Делал на основе стрелки с градиентом. Чтобы получить скошенную сторону, спрятал за кнопку псевдоэлемент и трансформировал его с помощью skewX. Чтобы кнопка растягивалась, переместил точку трансформации в угол, растянул псевдоэлемент между верхним и нижним краями родителя и задал ему ширину как у родителя.
https://codepen.io/glebkema/pen/eRPgMP
.btn-skew, .btn-skew:before { border: 1px solid #4d7a9c; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #238fe7; /* Old browsers */ background: -moz-linear-gradient(top, #238fe7 0%, #156fba 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */ } .btn-skew { border-left: none; color: white; font-size: 18px; margin-left: 20px; padding: 10px 14px 11px 10px; position: relative; } .btn-skew:before { content: ''; display: block; position: absolute; top: -1px; right: 0; bottom: -1px; width: 100%; z-index: -1; -webkit-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); -o-transform: skewX(-15deg); transform: skewX(-15deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; }