ホームページ > 記事 > ウェブフロントエンド > CSSで六角形の絵を作る方法
今回はCSSで六角形の画像を作る方法を紹介します。CSSで六角形の画像を作る際の注意点を実際に見てみましょう。
単純な div と疑似要素を使用して、この六角形の絵を「描く」ことができます。原理は、同じ幅と高さの 3 つの div を位置決めと回転によって六角形に結合し、背景画像を重ねて A を形成することです。完成したビジュアル映像。段階的に実装してみましょう。
(1) したがって、最初のステップはもちろんコンテナを描画することです。コンテナは幅と高さを持つ div です。
描画する前に、問題を理解する必要があります。つまり、正六角形は同じ幅と高さの 3 つの div で構成されています (下の図に示すように、そのため、div の幅と高さは次の条件を満たさなければなりません)。 √3 回 正六角形を形成します。この値の計算方法はここでは説明しません。興味がある場合は、三角関数を使用して自分で計算してください。
ここでは、外側のコンテナーの幅を 190px に設定します。コードは次のとおりです
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrap{ height:110px; width: 190px; position: relative; margin: 200px auto; background: url('./eddie.jpg') 50% 50% no-repeat; background-size: auto 220px; } </style> <body> <div class='wrap'> </div> </body> </html>
(2) 2 番目のステップでは、左側の div とその疑似要素の画像を描画します
このステップでは、新しい div を使用して、六角形の左側を位置および回転し、新しい div の疑似要素を設定します。幅と高さを上の画像と同じ背景画像に設定します。新しい div 疑似要素の幅と高さは幅であることに注意してください。次に、画像が垂直に表示されるように疑似要素を回転します (新しい div を回転させる必要があるため、疑似要素の画像も回転するため、逆に回転して通常に戻す必要があります)。最後に、新しい div が非表示を超えるように設定し、六角形の左側が描画されます
。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrap{ height:110px; width: 190px; position: relative; margin: 200px auto; background: url('./eddie.jpg') 50% 50% no-repeat; background-size: auto 220px; } .common{ position: absolute; height: 100%; width: 100%; overflow: hidden; left:0; 23 } .common:before{ content:''; position: absolute; background:url('./eddie.jpg') 50% 50% no-repeat; background-size: auto 220px; width: 190px; height: 220px; } .left{ transform: rotate(60deg); } .left:before{ transform: rotate(-60deg) translate(48px,-28px); } </style> <body> <div class='wrap'> <div class='left common'></div> </div> </body> </html>
(3) 3番目のステップは、右側のdivとその疑似要素画像を描画することです
このステップの原理は2番目のステップと同じですが、角度が逆なので、詳細は説明しませんそして、完全なコードに直接アクセスしてください
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrap{ height:110px; width: 190px; position: relative; margin: 200px auto; background: url('./eddie.jpg') 50% 50% no-repeat; background-size: auto 220px; } .common{ position: absolute; height: 100%; width: 100%; overflow: hidden; left:0; } .common:before{ content:''; position: absolute; background:url('./eddie.jpg') 50% 50% no-repeat; background-size: auto 220px; width: 190px; height: 220px; } .left{ transform: rotate(60deg); } .left:before{ transform: rotate(-60deg) translate(48px,-28px); } .right{ transform: rotate(-60deg); } .right:before{ transform: rotate(60deg) translate(48px,28px); bottom: 0; } </style> <body> <div class='wrap'> <div class='left common'></div> <div class='right common'></div> </div> </body> </html>
この時点で、この原理を使用して他の画像表示効果を作成することもできます。将来的には、画像表示は単一のレンガではなくなります
これらの事例を読んだ後は、この方法を習得したことになるでしょう
より興味深い記事については、こちらをご覧ください。関連記事:
HTML5 ドロップダウン ボックスでユーザー エクスペリエンスを向上させる方法
H5 の WebGL の使用方法同じインターフェイスで json チャートと echarts チャートを作成する
以上がCSSで六角形の絵を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。