Это очень просто, нужно просто расшить вещь для детей. Unskew означает применение другого косого преобразования, но на этот раз с противоположным углом.

.parent { transform: skewX(45deg); }
.parent > * { transform: skew(-45deg); }

В общем, если вы применяете ряд преобразований к родительскому элементу и хотите, чтобы дочерние элементы вернулись к нормальному состоянию, вам нужно применить те же преобразования, только в обратном порядке (в большинстве случаев порядок имеет значение!) и с минусом для значений угла/длины, используемых для наклона, поворота или перемещения. В случае масштаба вам нужен масштабный коэффициент 1/scale_factor_for_parent. То есть для масштаба вы бы сделали что-то вроде этого:

.parent { transform: scale(4); }
.parent > * { transform: scale(.25); /* 1/4 = .25 */ }

Алмазная форма с детьми довольно проста.

ДЕМО

Результат:

HTML:

<div class='wrapper'>
  <div class='diamond'>
    <div class='child'>Yogi Bear</div>
    <div class='child'>Boo Boo</div>
  </div>
</div>

CSS:

.wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 10em; height: 10em;
}
.diamond {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4em 1em 0;
  width: 86.6%; height: 100%;
  transform: translateY(-37.5%) rotate(30deg) skewY(30deg);
  background: lightblue;
}
.child {
  transform: skewY(-30deg) rotate(-30deg);
}

Любое свойство transform влияет на элемент, который применяется к и всем его дочерним элементам.

Таким образом, единственный способ skew одного "родительского" элемента - это иметь его без дочерних элементов (т.е. он не может быть также и родителем!).

Не могли бы вы немного уточнить, что вы хотите получить в результате?

skew(), как и все свойства преобразования, всегда влияет на дочерние элементы. Вы можете попробовать использовать два блока HTML в одной и той же позиции, один с skew(), а другой с содержимым.

Кроме того, если вы просто хотите ромб, вам должно хватить прямоугольного прямоугольника с функциями scale() и rotate(), но опять же без дочерних элементов.

И если вам нужен этот ромб в качестве маски, я уверен, что было бы проще визуализировать части, НЕ присутствующие в ромбе. Визуализация внешних частей ромба не должна быть такой сложной, в конце концов, это всего лишь прямоугольные треугольники.

единственный способ добиться этого — убрать дочерний элемент из потока документов с помощью position:absolute; и присвоить дочернему элементу равный отрицательный градус.

Проблема в том, что теперь вам придется изменять размер родителя вручную.