如何在保持角度不变的同时创建响应式线性渐变? [英] How to create a responsive linear-gradient while keeping the angle unchanged?

问题描述

大家好，我想更改这里的位置，我们需要将删除线更新为相同的对角线-以45度为中心.请在下面找到代码...

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>

这里要显示如下图

如果我还有其他需要，请让我.谢谢!!!

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

推荐答案

如果高度是固定的，则可以将背景尺寸设置为正方形，尺寸等于高度(在您的情况下为 42px )并使其居中，如下所示:

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>

没有 background-size 和 background-position 的另一种方法是简单地将度数设置为 -45deg ，然后您需要找到中心使用 calc()结合 50％

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>

您也可以使用倾斜元素作为背景进行尝试，以防万一您不能使用 calc()

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>

这篇关于如何在保持角度不变的同时创建响应式线性渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！