Как я могу использовать преобразование CSS3 на промежутке?

У меня есть встроенный элемент (a ), вложенный в тег <h1>. Я применил свойство transform к h1 (перекос, чтобы он выглядел как параллелограмм).
Мне нужно преобразовать тег span в "unskew" его и его текст. Но это, похоже, работает только в IE.

Вот пример HTML и 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>

Ответ 1

Объяснение:
A  - встроенные элементы, а свойство Transform не применяется к встроенным элементам.
Список преобразованных элементов на модуле CSS Transforms Level 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>

Ответ 2

Немного поздно, но вы можете установить

h1 span{
   position:absolute;
}

Затем обычно используйте свойства преобразования CSS3.