如何在跨度上使用CSS3转换？

小编典典

如何在跨度上使用CSS3转换？

css

我在标签中嵌套了一个 内联元素 （a ）<h1>。我将 转换属性 应用于h1（偏斜，因此看起来像平行四边形）。我需要 将span标签转换 为“ unskew”它及其文本。但这似乎仅在IE中有效。

h1 {

  background: #f00;

  padding: .25em .5em;

  text-align: right;

  transform: skew(-15deg);

}

h1 span {

  color: #fff;

  transform: skew(15deg);

}


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

阅读 332

2020-05-16

共1个答案

小编典典

说明：
A 是一个内联元素，并且 Transform属性不适用于内联元素 。 CSS转换模块1级上的可

解决方案：
将跨度的显示属性设置为inline-block或block。这将使您将转换应用于span元素。
它也适用于其他内联元素，例如<a>…请参阅[MDN上的内联元素列表。

这是带有元素的演示：

h1 {

  background: #f00;

  padding: .25em .5em;

  text-align: right;

  transform: skew(-15deg);

}

h1 span {

  color: #fff;

  display: inline-block;  /* <- ADD THIS */

  transform: skew(15deg);

}


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

2020-05-16