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

#html #css #css3

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


    

Ответы

Ответ 1

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;
}




Ответ 2

Реализация на основе свойства transform



.element {
  display:inline-block;
  position:relative;
  width:100px; height:40px;
  background-color:blue;
  border-radius:5px 5px 5px 0;
  padding-left:15px;
}
.element::before {
  position:absolute;
  top:0; bottom:0; left:-7.5px;
  width:15px;
  background-color:blue;
  border-radius:5px 0 0 7.5px;
  content:'';
  transform:skewX(-15deg);
}
body {
  margin:100px;
}