形状渐变 [英] Gradient with Shape
问题描述
我正在尝试对按钮进行渐变,但无法使其与按钮的其他部分具有相同的渐变. 我尝试在渐变内添加渐变,但是它似乎不起作用,也找不到解决方案. 这是我正在使用的代码:
I'm trying to do a gradient on a button but I can't make it have the same gradient as the other part of the button. I tried adding a gradient inside a gradient but it doesn't seems to work and can't find a solution for it. This the code I'm using:
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>
有没有办法解决这个问题? 预先感谢
Is there a way to solve this problem? Thanks in advance
推荐答案
在应用渐变的伪元素上考虑倾斜变换.由于它是上下方向,因此倾斜不会受到倾斜的影响
Consider a skew transformation on a pseudo element where you apply the gradient. Since it's a top/bottom direction, the gradient will not get affected by the skewing
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>
对于另一个方向,您可能需要调整渐变的程度:
For another direction, you may need to adjust the degree of the gradient:
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>
这篇关于形状渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!