Как использовать перекос только в родительском элементе?

Есть ли способ использовать перекос только в родительском элементе? Мне нужно создать что-то вродеалмаз» как маска и дочерние элементы могутне может быть затронут. В этом случае невозможно использовать png в качестве маски. Заранее спасибо!

Ответы на вопрос(4)

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

Так что единственный способskew один "родитель» элемент должен иметь это без детей (то есть: это может 'быть родителем!)

Это действительно просто, нужно просто раскрутить вещь для детей. 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 */ }

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

DEMO

Результат:

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);
}

что вы хотите получить в результате?

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

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

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

а документов, используяposition:absolute; и наложение равного отрицательного уклона на ребенка.

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

Ваш ответ на вопрос