我希望文本(在本例中位于 内<h1>
)具有彩色背景,其中左右边界是倾斜的。像这样:
我知道我应该通过设置类似这样的背景来实现这一点linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
(我在本例中使用了它),但我无法正确设置左右边界。我认为问题在于我需要设置渐变的起始值和终止值(本例中为 5% 和 95%),但这意味着根据文本的长度,过渡是“某处”。
h1 span {
background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
padding-left: 0.8rem;
margin-right: 1rem;
}
<h1> <span> This is a title </span> </h1>
请注意,我必须手动进行调整padding-left
并margin-right
以某种方式使其看起来还可以(即使“标题”右侧有太多空间?)。
如果我把文本弄长,同样的 CSS 会产生如下效果:
这可能是因为<span>
的宽度的 5% 和 95% 现在位于不同的位置,对吗?
我想要的解决方案是:
- 始终与文本长度一致
- 允许我控制倾斜的角度(本例中为 12°)
- 不会扭曲文本本身
- 适用于多行文本
- 不切断倾斜的背景(参见上面第二个示例的右边界)
- 第一个字母和背景框左边界之间有一点空间,最后一个字母和背景框右边界之间有相同大小的空间。
linear-gradient
我尝试设置“到0.001%
”或“某物”的边界99.999%
,但这实际上消除了倾斜的边框: