今回はCSSで六角形の画像を作成する方法と、CSSで六角形の画像を作成する際の注意点を紹介します。実際の事例を見てみましょう。
この記事では主に CSS で六角形の画像を実現するためのサンプルコードを紹介し、皆さんに共有します。詳細は次のとおりです:
それ以外の場合は、最初に効果について話しましょう:
単純な p を使用します。この六角形の絵を描く原理は、同じ幅と高さの 3 つの p を位置決めと回転によって六角形に組み立て、背景画像を重ねて視覚的な全体像を形成することです。段階的に実装してみましょう。
(1) 最初のステップは、もちろんコンテナを描画することです。コンテナは幅と高さを持つ p です。
描画する前に、問題を理解する必要があります。つまり、正六角形は同じ幅と高さの 3 つの p で構成されているため (下の図に示すように)、p の幅と高さは次の条件を満たさなければなりません。 √3 倍 正六角形を形成するために、この値の計算方法はここでは教えません。興味があれば、三角関数を使用して個人的に計算することができます。
ここでは、外側のコンテナの幅を190px、高さを110pxにして、背景画像を設定します。コードは次のとおりです
<!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> <p class='wrap'> </p> </body> </html>
効果は画像です
(2) 2番目のステップは、左のpとその疑似要素の画像を描画することです
このステップでは、新しいpの位置を使用して回転し、六角形の左側をステッチし、新しい p 疑似要素の幅と高さを設定し、上の図と一致する背景画像を設定します。新しい p 疑似要素の幅と高さが同じであることに注意してください。六角形全体の。次に、疑似要素を回転して画像を垂直に表示します (新しい p を回転させる必要があるため、疑似要素の画像も回転するため、逆回転して通常の角度に戻す必要があります)。疑似要素の位置を調整する必要があります。 (新しい p が回転され、疑似要素の位置に影響します)、最後に新しい p が隠れた値を超えるように設定します
<!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> <p class='wrap'> <p class='left common'></p> </p> </body> </html>
効果は次のとおりです:
。
(3) 3番目のステップは、右pとその疑似要素の絵を描くことです
これ ステップの原理は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> <p class='wrap'> <p class='left common'></p> <p class='right common'></p> </p> </body> </html>
この時点で、記事の冒頭に画像を表示することができます。この原理を使用して、他のさまざまな形状の画像表示効果も作成できます。研究を続けていただければ幸いです。将来的には、絵の表示はもはや単一のレンガの線ではなくなります。 !
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がCSSで六角形の絵を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。