半偏斜按钮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链接

 .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>