如何在跨度上使用CSS3轉換？

Question

我有一個嵌套在<h1>標記中的內聯元素（a <span>）。我將轉換屬性應用於h1（偏斜，因此它看起來像平行四邊形）。
我需要將span標記轉換爲「反斜槓」它及其文本。但是這似乎只能在IE中運行。

下面是HTML的an example和CSS：

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>

Answer 1

說明：
一個<span>是一個內聯元素和Transform屬性對行內元素不適 。
List of transformable elements on the上的CSS轉換模塊級別1。

解決方案：
設置跨度的顯示屬性inline-block或block：

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>

Answer 2

有點晚了這裏，但你可以設置

h1 span{ 
    position:absolute; 
} 

Th通常使用CSS3轉換屬性。