[英]How to create a responsive linear-gradient while keeping the angle unchanged?
大家好,我想改变,我们需要将删除线更新为相同的对角线 - 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>
这里想显示如下图
如果我这边还有什么需要,请告诉我。 谢谢!!!
如果高度是固定的,您可以将背景大小设置为尺寸等于高度的正方形(在您的情况下为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.