ホームページ > 記事 > ウェブフロントエンド > CSSで六角形の絵を作る方法
CSSで六角形の絵を作る方法
- php中世界最好的语言オリジナル
- 2018-01-30 10:31:242416ブラウズ
今回は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 サイトの他の関連記事を参照してください。