CSSで六角形の絵を作る方法-CSSチュートリアル-php.cn

CSSで六角形の絵を作る方法

php中世界最好的语言

リリース： 2018-01-30 10:31:24

オリジナル

2417 人が閲覧しました

今回は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(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
    </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(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 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=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></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(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
 
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 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=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
        <div class=&#39;right common&#39;></div>
    </div>
</body>
</html>

ログイン後にコピー

この時点で、この原理を使用して他の画像表示効果を作成することもできます。将来的には、画像表示は単一のレンガではなくなります

これらの事例を読んだ後は、この方法を習得したことになるでしょう

より興味深い記事については、こちらをご覧ください。関連記事:

HTML5 ドロップダウンボックスでユーザーエクスペリエンスを向上させる方法

H5 の WebGL の使用方法同じインターフェイスで json チャートと echarts チャートを作成する

新しいセマンティックタグ機能の使用方法H5

以上がCSSで六角形の絵を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。