主页 / coding / 问题 / 79192415
Accepted
Lukas Barth
Asked: 2024-11-15 20:39:15 +0800 CST

带有倾斜背景的文字 [重复]

  • 772

我希望文本（在本例中位于 内<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>

JSFiddle

请注意，我必须手动进行调整padding-left并margin-right以某种方式使其看起来还可以（即使“标题”右侧有太多空间？）。

如果我把文本弄长，同样的 CSS 会产生如下效果：

带有彩色背景的较长标题

这可能是因为<span>的宽度的 5% 和 95% 现在位于不同的位置，对吗？

我想要的解决方案是：

  • 始终与文本长度一致
  • 允许我控制倾斜的角度（本例中为 12°）
  • 不会扭曲文本本身
  • 适用于多行文本
  • 不切断倾斜的背景（参见上面第二个示例的右边界）
  • 第一个字母和背景框左边界之间有一点空间，最后一个字母和背景框右边界之间有相同大小的空间。

linear-gradient我尝试设置“到0.001%”或“某物”的边界99.999%，但这实际上消除了倾斜的边框：

更长的标题，这次背景一点也不倾斜

html

6 个回答

  1. Best Answer

    您所锁定的是财产transform: skew()。

    只需为容器赋予其值并为其子元素赋予相反的值。

    .skew {
  background: #ff00ff;
  text-align: center;
  padding: 1rem;
  width: 60%;
  transform: skew(-20deg);
  margin: 0 auto;
}

h1 {
  transform: skew(20deg);
}
    <div class="skew">
  <h1>Hello World!</h1>
</div>

    • 4

  2. 您可以使用 transofrm 的倾斜属性。

    请用渐变色替换背景颜色。

    希望这有帮助。

    h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  background: red;
  display: inline-block;
  transform: skew(-20deg);
  padding: 5px;
  color: #FFF;
}
    <h1> <span> This is a title </span> </h1>

    • 3

  3. 只需使用padding-left和padding-right 5%，因为这也是的填充linear-gradient。

    h1 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  padding-left: 5%;
  padding-right: 5%;
}
    <h1> <span> This is a title </span> </h1>

    • 2 

  4. h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  display: inline-block;
  padding: 5px 15px;
  color: #FFF;
  position:relative;
  z-index:0;
}
h1 span:before{
  position:absolute;
  content:'';
  background:linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);;
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform: skew(-20deg);
  z-index:-1;
}
    <h1> <span> This is a title </span> </h1>

    • 1 

  5. h1 span {
padding: 10px;
margin: 10px;
background: linear-gradient(to bottom right, transparent 50%, lightblue 50%),
linear-gradient(lightblue, lightblue),
linear-gradient(to top left, transparent 50%,lightblue 50%);
background-repeat: no-repeat;
background-size: 10px 40px, calc(100% - 20px) 40px, 10px 40px;
background-position: left center, center, right;

}
    <h1> <span> This is a title </span> </h1>
<h1> <span> This is a longest title that are highlighted </span> </h1>

    你可以尝试这些，希望它可能有用

    • 0 

  6. h1 {
  padding: 2px;
  background: cyan;
  font:bold,italic;
}
 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  display: inline-block;
  padding-right:50%;
  padding-left:50%;
  color: #FFF;
  margin-left:30px;
  padding:10px;

}

  
    <h1> <span> This is a title <span> </h1>

    • -1

相关问题