css - トランスフォームを使用して左右に2つのボックスをCSS

Question

私がタイトルを付けたように、私はこの男のような2つのボックスを持っているので、私の問題を理解できるようになりました;)レスポンシブレイアウトで、このボックスを背景の黄色の変換で表示したいです。 . 私はそれが難しすぎると思う友人を助けてください:(

私はcss3を使用しています

Answer 1

これがあなたの（ほとんどの）クロスブラウザソリューションです：

<style type="text/css">
#oneOfYourRectangles
{
    -ms-transform:rotate(10deg); /* IE 9 */
    -moz-transform:rotate(10deg); /* Firefox */
    -webkit-transform:rotate(10deg); /* Safari and Chrome */
    -o-transform:rotate(10deg); /* Opera */
}
#theOtherRectangle
{
    -ms-transform:rotate(350deg); /* IE 9 */
    -moz-transform:rotate(350deg); /* Firefox */
    -webkit-transform:rotate(350deg); /* Safari and Chrome */
    -o-transform:rotate(350deg); /* Opera */
}
</style>

負の値がサポートされているかどうかを確認するためのテストを行ったことはありません。

また、明らかに 10deg と 350deg は単なる推測であることに注意してください。最適な値に置き換えてください。

また、念のため、Webkit (Safari および Chrome) も 3D 変換をサポートしていることに注意してください。