如何在保持角度不变的情况下创建响应式线性渐变？

Question

Hello Everyone here i wanted to change, We need to update the strikethrough to be the same diagonal - 45 degrees centered. Please find the code at below...

 .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>

Here wanted to display like below image

Please let me if anything more needs from my side. Thanks!!!

Answer 1

If the height is fixed you can set the background size to be a square with dimension equal to height ( 42px in your case) and center it like below:

 .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>

Another idea is to make the gradient a big square in case you don't know the exact height and it will work with dynamic height.

 .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>

Another way without background-size and background-position is to simply set the degree to be -45deg and you need to find the center using calc() combined with 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>

---

You can also try this using a skewed element as background where you will have better support in case you cannot use 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>