形状渐变

Question

我想在按钮上做一个渐变，但我无法使它与按钮的其他部分具有相同的渐变。我尝试在渐变内添加渐变，但它似乎不起作用，也找不到解决方案。这是我正在使用的代码：

button{
  color: white;
  padding: 3px 3px 3px 0px;
  border: 0px;
  font-size: 20px;
  width: 200px;
  text-align: right;
  background: linear-gradient(50deg , transparent 50%, rgb(149, 151, 155) 0%) left no-repeat, linear-gradient(rgb(200, 205, 212), rgb(149, 151, 155)) 30px 0 no-repeat;
  background-size: 30px 100%, 100% 100%;
  position: relative;
  cursor: pointer;
}

<button>Meet the Team</button>

有没有办法解决这个问题？提前致谢

Answer 1

考虑对应用渐变的伪元素进行倾斜变换。因为它是 top/bottom 方向，渐变不会受到倾斜的影响

button{
  color: white;
  padding: 3px 3px 3px 0px;
  border: 0px;
  font-size: 20px;
  width: 200px;
  text-align: right;
  position: relative;
  cursor: pointer;
  overflow:hidden;
  background:none;
  z-index:0;
}
button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top;
  transform:skewX(50deg);
  background:linear-gradient(rgb(200, 205, 212), rgb(149, 151, 155));
}

<button>Meet the Team</button>

换个方向，可能需要调整渐变的程度：

button{
  color: white;
  padding: 3px 3px 3px 0px;
  border: 0px;
  font-size: 20px;
  width: 200px;
  text-align: right;
  position: relative;
  cursor: pointer;
  overflow:hidden;
  background:none;
  z-index:0;
}
button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top;
  transform:skewX(50deg);
  background:linear-gradient(-50deg,purple,red);
}

<button>Meet the Team</button>

Answer 2

那是因为您已经在使用线性渐变属性作为在按钮上创建三角形末端的技巧。

您不能多次使用相同的属性。如果你想要一个三角形的末端，也许在你的按钮上坚持使用纯色。

形状渐变

Gradient with Shape

html

css

gradient

linear-gradients