CSSで三角形を作る方法

CSS で三角形を作成する方法: 最初に HTML サンプル ファイルを作成し、次に p を作成し、最後に「border-color: 透明、透明、赤、透明;」などの属性を使用して三角形の効果を実現します。

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

CSS で三角形を作成する方法?

CSS で三角形を作成する方法を教えます

今日は、Max が CSS で三角形を作成するテクニックを共有します~
三角形の作成方法 QAQ? ? ?
焦らず、焦らず、少しずつやっていきましょう。

制作方法

最初に p:

.triangle{
    height: 100px;
    width: 100px;
    border:100px solid ;
    border-color: red orange blue purple;
}

を書きます。結果は次のとおりです。

次に、p1 という名前のこのクラスの p は、幅と高さが 100 ピクセルの正方形で、その境界線は 100 ピクセル、上下左右の境界線は赤、青、紫、オレンジです。 (パターンはとても美しいですね?)
それでは、これは三角形とどのような関係があるのか​​と疑問に思うかもしれません。
さあ、次のステップに進みましょう: p の幅と高さを 0 に設定します;
画面上に 4 色の正方形があり、この正方形はたまたま 4 つの三角形で構成されていることがわかります。国境。
この時点では、必要な方向を選択し、他の三角形を透明に設定します。
ここで皆さんに思い出していただきたいのですが、属性の透明度は (transparent) です。
たとえば、上向き矢印の付いた赤い三角形が必要な場合、コードは次のとおりです:

.triangle-red{
    height: 0px;
    width: 0px;
    border:100px solid ;
    border-color: transparent transparent red transparent;
}

結果は次のとおりです:

# #早速試してみましょう！左上、左下、右上、右下の三角形を作成することもできます。たとえば、左上:

.triangle-red{
    height: 0px;
    width: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

レンダリング:

推奨される調査: 「

css ビデオ チュートリアル >>

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