Полу косая кнопка css

Question

Я хотел бы сделать такую ​​кнопку в CSS.
Не могли бы вы помочь мне сделать это?
Косого преобразования недостаточно...

Спасибо

Answer 1

Мы можем использовать псевдоэлементы кнопки, чтобы она выглядела как на картинке...

HTML

<button class="skew-btn">Skew Button</button>

CSS

.skew-btn
{
  padding:14px;
  border:none;
  background: linear-gradient(to right,#2196F3,#8BC34A);
  color:#fff;
  font-weight:600;
  font-size:26px;
  position: relative;
}
.skew-btn::before,
.skew-btn::after
{
  content:"";
  position: absolute;
  height:0px;
  width:0px;
  border:10px solid #fff;
}

.skew-btn::before
{
  top:0;
  left:0;
  border-bottom-color:transparent;
  border-right-color:transparent;
}
.skew-btn::after
{
  bottom:0;
  right:0;
  border-left-color:transparent;
  border-top-color:transparent;
}

Внесите изменения, если это необходимо..

Надеюсь это поможет

CodePen Link

.skew-btn {
  padding: 14px;
  border: none;
  background: linear-gradient(to right, #2196F3, #8BC34A);
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  position: relative;
  outline: 0;
}

.skew-btn::before,
.skew-btn::after {
  content: "";
  position: absolute;
  height: 0px;
  width: 0px;
  border: 10px solid #fff;
}

.skew-btn::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.skew-btn::after {
  bottom: 0;
  right: 0;
  border-left-color: transparent;
  border-top-color: transparent;
}

<button class="skew-btn">Skew Button</button>