半倾斜按钮 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>

半倾斜按钮 css

Semi skew button css

css

button

skew