CSS3-hexagon_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3-hexagon_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

2 つのメソッドを整理しましたが、読んだ後はとても簡単だと思います~

1. 回転タイプ

早速、必要なスタイルを見てみましょう:

1.transform :rotate(angle)

2.overflow

3.visibility

効果: デモンストレーションエフェクト、runjs

html構造:

<body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

3層div、構造は非常に単純です~回転方法次？

理解しやすいように背景を追加しました

box1: 赤

box2: 黒

box3: ピンク

1.box1 は 120° 回転し、box2 は -60° 回転し、box3 は再び -60° 回転します。コンテンツは box3 に配置されます。

2. 回転後には余分な部分があるはずなので、3 つの div のすべてに overflow:hidden を設定します。

3.box1 と box2 は六角形を取得するために回転するために使用されるため、Box3 には表示する必要があるコンテンツが含まれているため、visibility:visible を設定します。

(box3 の Visibility:visible; を設定しない場合、box2 の Visibility:hidden; が継承されます)

div の幅と高さは等しくなくてよいことに注意してください。そうでない場合、結果は六角形。

余分な部分を回転して非表示にした後、必要な 6 辺の形状を得ることができます。すべてのコードは次のとおりです:

        CSS3—六边形    <body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

2. スプライシングタイプ

効果を見てください: デモンストレーション効果, runjs

明らかに三角形2つと長方形1つですね、とてもシンプルですね〜

三角形については前の記事を参照してください: CSS3-Triangle

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css—六边形2</title>    <style>    .triangleb{        width:0;        height:0;        border-top:0px solid transparent;        border-right:60px solid transparent;        border-bottom:40px solid pink;        border-left:60px solid transparent;    }    .trianglet{        width:0;        height:0;        border-top:40px solid pink;        border-right:60px solid transparent;        border-bottom:0px solid transparent;        border-left:60px solid transparent;    }    .box{        width: 120px;        height: 65px;        background-color: pink;    }</style></head><body>    <div class="triangleb"></div>    <div class="box"></div>    <div class="trianglet"></div></body></html>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

See all articles