CSSでポリゴンを実装する方法

CSS で多角形を実装する方法: 最初に HTML サンプル ファイルを作成し、次に、transform の skew 属性を使用して平行四辺形を実装し、次に before 疑似要素を使用して三角形を実装し、最後に平行四辺形の行と三角形を使用してポリゴンを実装します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS でポリゴンを実装するにはどうすればよいですか?

CSS | 面白いポリゴンを実現する

フロントエンド開発への道は長く、Webの世界に進む途中で、私たちはポリゴンデザインに出会ったことがあるはずです。 . 結局のところ、一番簡単な方法は、写真をアップロードして開始することです. 「追求」を伴うフロントエンドとして、当然「自虐」をしなければなりません... 今日は、でポリゴンを実装する方法について話しますフロントエンド プログラミング. まず、画像をアップロードし、それから最初にそれを実装する方法を考えます。

レンダリング

「実装方法」、「上向きの斜体のテキストはありますか」、「Word」ティアンさん、面倒なので直接画像を送ってください。」リラックスして深呼吸して、CSS を磨き上げる方法を見てみましょう。

このラベルのような多角形は、平行四辺形と垂直三角形の組み合わせとして見ることができます。まず、長方形を追加します:

単純な幅、高さ

長方形を平行四辺形に変えるにはどうすればよいですか?ワイヤーで作られた長方形を例に挙げますが、これをどのようにして平行四辺形に変えるのでしょうか?誰かが答えました：それはとても簡単です、少しひねるだけです。ちなみに、トランスフォームのスキュー属性であるディストーションです。

transform: skew(-10deg);

ねえ、このとき誰かが尋ねました、それは上に傾いていませんか?これを破る方法は、心配しないでください。

##transform: skew(-10deg) 回転(-8deg)

OK、ほぼ完了です。しかし、それはまだです ここに、上の図に三角形があります:

##幅: 0;高さ: 0

コードは次のとおりです:

トライアングル コード

なぜ疑似要素の前に使用するのでしょうか?ご存知のように、レイアウトを容易にするために、幅と高さを両方とも非常に巧妙に 0 にし、境界線の色と位置を使用して設定します。これは、通常見られるほとんどのポリゴンを含めて、ほぼ同じ原理です。最終的なコードは次のとおりです。

CSS エクスプローラーとして、変換と組み合わせてさまざまな境界線を設定して、五角形、八角形など、どのような賢い効果があるかを確認してください。すべてを指先で操作して、ポリゴンの世界を攻略しましょう。

推奨学習: 「

css ビデオ チュートリアル

」

以上がCSSでポリゴンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。