ホームページ > 記事 > ウェブフロントエンド > CSSを使って三角形を描く方法
最初にレンダリングを見てみましょう:
(ビデオ チュートリアルの推奨: css ビデオ チュートリアル)
実装コード:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /* css3绘制三角形 */ .triangle{ width: 0px; /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/ height: 0px; border-bottom: 200px solid #00a3af; border-left: 200px solid transparent; /*transparent 表示透明*/ border-right: 200px solid transparent; } </style> </head> <body> <div class="triangle"></div> </body> </html>
まだ理解できない人は、次を読んでください
1. divを一定の幅と高さに設定し、四辺に境界線を設定します
.triangle{ width: 50px; height: 50px; border-top: 200px solid #00a497; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }
上記のコードは、div に特定の幅と高さを設定します。4 辺に境界線を設定すると、効果は次のようになります:
2. 設定div の幅と高さを 0 に設定し、4 辺すべての境界線の幅を 200px
.triangle{ width: 0px; height: 0px; border-top: 200px solid #00a497; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }
に設定します。上記のコードは div の幅を設定します。高さが 0 で 4 つの境界線が異なる色に設定されている場合、効果は次のようになります。
(推奨される関連チュートリアル: CSS チュートリアル)
3 の場合、div の幅と高さは 0 のままです。 、border-topを削除します
.triangle{ width: 0px; height: 0px; border-bottom: 200px solid #cc7eb1; border-left: 200px solid #165e83; border-right: 200px solid #c85179; }
上記のコードはdivの幅と高さを0に設定し、下の境界線と左右の境界線のみを設定します。効果は次のとおりです:
#4. 最後に、border-bottom の色を設定し、左右の境界線を透明にすることで、三角形
.triangle{ width: 0px; height: 0px; border-bottom: 200px solid #cc7eb1; border-left: 200px solid transparent; border-right: 200px solid transparent; }最終効果を得ることができることがわかりました:
#
以上がCSSを使って三角形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。