【问题标题】：How to create a responsive linear-gradient while keeping the angle unchanged?如何在保持角度不变的情况下创建响应式线性渐变？
【发布时间】：2019-03-01 10:22:28
【问题描述】：
大家好，我想更改，我们需要将删除线更新为相同的对角线 - 以 45 度为中心。请在下面找到代码...
.Product__widths__button {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.Product__widths__button.disabled {
color: #D1D1D1;
background: linear-gradient(to top left, #fff 38px, #D1D1D1, #fff 40px);
border-color: #D1D1D1;
}
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)</a>
这里想显示如下图
如果我还有什么需要，请告诉我。谢谢！！！
【问题讨论】：
标签：
html
css
linear-gradients
【解决方案1】：
如果高度是固定的，您可以将背景大小设置为尺寸等于高度的正方形（在您的情况下为42px）并将其居中，如下所示：
.Product__widths__button {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.Product__widths__button.disabled {
color: #D1D1D1;
background:
linear-gradient(to top left,
/*the center is 42px*cos(45deg) = 29.7px, we remove/add pixel around*/
transparent 28px,#D1D1D1,transparent 31px)
center/42px 100% /*background-position/background-size (100% is your height)*/
no-repeat;
border-color: #D1D1D1;
}
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)</a>
另一个想法是让渐变成为一个大正方形，以防您不知道确切的高度，并且它适用于动态高度。
.Product__widths__button {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
display: block;
font-size: 16px;
line-height: 42px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.Product__widths__button.disabled {
color: #D1D1D1;
background:
linear-gradient(to top left,
/* the center is 500px*cos(45deg) = 353.5px*/
transparent 351px,#D1D1D1,transparent 355px)
center/500px 500px /*background-position/background-size */
no-repeat;
border-color: #D1D1D1;
}
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)</a>
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)<br>another line</a>
没有background-size和background-position的另一种方法是简单地将度数设置为-45deg，您需要使用calc()结合50%找到中心
.Product__widths__button {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
display: block;
font-size: 16px;
line-height: 42px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
.Product__widths__button.disabled {
color: #D1D1D1;
background:
linear-gradient(-45deg,transparent calc(50% - 2px),#D1D1D1,transparent calc(50% + 2px));
border-color: #D1D1D1;
}
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)</a>
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)<br>another line</a>
您也可以尝试使用倾斜元素作为背景，以防您无法使用calc()
.Product__widths__button {
background: #FFFFFF;
border: 1px solid #333333;
color: #333333;
display: block;
font-size: 16px;
line-height: 42px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
position:relative;
z-index:0;
}
.Product__widths__button.disabled {
color: #D1D1D1;
border-color: #D1D1D1;
}
.Product__widths__button.disabled::before {
content:"";
position:absolute;
z-index:-1;
left:0;
top:0;
bottom:0;
width:calc(50% - 2px); /*we remove half the border-width to have a perfect centring*/
border-right:4px solid #D1D1D1;
transform:skewX(-45deg);
}
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)</a>
<a id="width_1_1" class="Product__widths__button disabled"><span>W</span> (Wide)<br>another line</a>