7

親要素でのみスキューを使用する方法はありますか？マスクとして「ダイヤモンド」のようなものを作成する必要があり、子要素は影響を受けません。この場合、pngをマスクとして使用する方法はありません。前もって感謝します！

4

4 に答える 4

18

それは本当に簡単です、あなたはただ子供たちのために物事をゆがめる必要があります。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);
}
于 2013-02-15T04:34:03.883 に答える
1

すべてtransformのプロパティは、適用される要素とそのすべての子に影響します。

したがって、skew単一の「親」要素への唯一の方法は、子を持たないことです（つまり、親になることはできません！）。

于 2012-10-23T09:35:45.250 に答える
1

結果として何を得たいかについて少し詳しく説明してみませんか？

すべての変換プロパティと同様に、skew（）は常に子要素に影響します。同じ位置で2つのHTMLブロックを使用してみてください。1つはskew（）を使用し、もう1つはコンテンツを使用します。

また、ひし形だけが必要な場合は、scale（）とrotate（）を備えた長方形のボックスで十分ですが、子はありません。

そして、そのダイアモンドをマスクとして使用したい場合は、ダイアモンドに存在しないパーツをレンダリングする方が簡単だと確信しています。ひし形の外側の部分のレンダリングはそれほど難しくないはずです。結局のところ、それらは長方形の三角形にすぎません。

于 2012-10-23T09:36:51.287 に答える
0

position:absolute;これを実現する唯一の方法は、子に等しい負の次数のスキューを使用して、子要素をドキュメントフローから削除することです。

これに伴う問題は、親のサイズを手動で変更する必要があることです。

于 2017-11-18T04:04:44.337 に答える