しかし、誰かが興味を持っていたら、詳細なマニュアルを書いてみませんか？
要件の1つは、花ごとのオブジェクトの最小数でした。これにより、コードを少し変更するだけで、任意の数の色を使用できます。 茎と葉を含む5つのオブジェクトのみを取得しましたが、必要に応じて、より複雑な花を描くことができます。
コードを単純化して視覚化するために、プレフィックスをスキップしますが、WebKitエンジン（SafariおよびChrome）のブラウザーはプレフィックスなしの変換プロパティを理解しないことに注意する必要があります--webkit-transformプロパティを追加で指定する必要があります すべてのブラウザーはグラデーションとシャドウを理解します（この記事のフレームワーク内では、エクスプローラーをブラウザーと見なさないようにしていますが、必要に応じて描画できます）。
まず、すべての花びらに共通の空白を作成します。
.petalbottomright, .petalbottomleft, .petaltopcenter{ background: #601719; background: linear-gradient(top, #da2b2a, #601719); border:1px solid #000; box-shadow: 1px 1px 4px #333; }
「CSSアンチエイリアシング」と言えば、色とグラデーションが問題を引き起こすことはなく、フレームとシャドウは不規則性を隠すように設定されています。
次に右葉：
.petalbottomright{ position:absolute; top:10px; width: 30px; height: 83px; border-top-right-radius: 74px; border-bottom-left-radius: 56px; transform: rotate(355deg); }
寸法によっても問題が発生しないはずです。 右上隅と左下隅（それぞれ、border-top-right-radiusおよびborder-bottom-left-radius）を丸め、transformを使用してブロック全体をその軸の周りに回転させます。
右の花弁と同様に、左の花弁を行います。
.petalbottomleft{ position:absolute; top:10px; margin-left:30px; width: 36px; height: 86px; border-top-left-radius: 74px; border-bottom-right-radius: 46px; transform: rotate(12deg); }
中央の花びら、最小：
.petaltopcenter{ margin-left:15px; width: 40px; height: 40px; border-top-left-radius: 74px; transform: rotate(50deg); }
次に、最初に収穫する茎を扱いましょう。
.stem1, .stem2, .stem3{ position:absolute; margin-left:30px; width: 10px; height: 180px; background: linear-gradient(left, #028e31, #601719); }
勾配は上から下ではなく、左から右であることに注意してください。
そして、ステムのインデントは、それらを異なるものにする必要があるように思えました。
.stem1{margin-top:70px;} .stem2{margin-top:90px;} .stem3{margin-top:80px;margin-left:23px;}
葉が残っていたので、私のワークピースは次のようになりました。
.leftleaf, .rightleaf, .centerleaf{ position:absolute; width: 60px; height: 30px; background: linear-gradient(left, #028e31, #601719); }
また、リーフ自体は、インデントとコーナーの半径の位置のみが異なります。
.leftleaf { margin-top: 120px; margin-left: 24px; border-bottom-left-radius: 32px; border-top-right-radius: 30px; } .rightleaf { margin-top: 170px; margin-left: -23px; border-bottom-right-radius: 36px; border-top-left-radius: 36px; } .centerleaf { margin-top: 120px; margin-left: -28px; border-bottom-right-radius: 38px; border-top-left-radius: 32px; }
私たちはすでに花を持っています、それは花束でそれらを収集する時間です。 HTMLは次のとおりです。
<div class="flower1"> <div class="stem1"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="centerleaf"></div> </div> <div class="flower2"> <div class="stem2"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="rightleaf"></div> </div> <div class="flower3"> <div class="stem3"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="leftleaf"></div> </div>
各花は、花1、花2、花3のコンテナ内に配置された3つの花弁、茎と葉で構成されています。 そして、花束自体のように、花自体をさまざまな角度で配置します。
.flower1{ margin-left:82px; position:absolute; transform: rotate(357deg) scale(1,1.2); -webkit-transform: rotate(357deg) scale(1,1.2); } .flower2{ margin-top:30px; position:absolute; transform: rotate(335deg) scale(1,1.2); -webkit-transform: rotate(335deg) scale(1,1.2); } .flower3{ margin-left:172px; position:absolute; transform: rotate(20deg) scale(1.1,1.2); -webkit-transform: rotate(20deg) scale(1.1,1.2); }
そしてもちろん、3色だけに制限することを強制する人はいません-それらが多ければ多いほど良いのです。 女性向け;）