html - 如何使用 CSS 创建此按钮？

Question

如何使用 CSS 创建以下按钮？

它倾斜的事实不是问题。我不确定的部分是从一个 Angular 到另一个 Angular 的颜色对 Angular 线分割。我不确定如何以响应式地适用于所有按钮尺寸的方式定义渐变。

到目前为止，对于倾斜按钮没有颜色对 Angular 线差异，我有以下内容。

button.btn {
  color: white;
  background-color: red;
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>

但我敢肯定，其中很多都必须改变。

Answer 1

这是适用于任何尺寸的渐变解决方案:

button.btn {
  color: white;
  background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
  padding: 10px 20px;
  line-height: 1;
  border: none;
  transform: skewX(-25deg);
  cursor: pointer;
}
button.btn span {
  display: block;
  transform: skewX(25deg);
}

<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>