ホームページ > 記事 > ウェブフロントエンド > CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)
CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)
- 青灯夜游オリジナル
- 2018-09-12 16:08:0410677ブラウズ
フロントエンド開発を行っているとき、ドロップダウン リストの逆三角形のグラフィックなど、ページの効果を高めるために小さなグラフィックが必要になることがあります。では、このような三角形はどのようにして作られるのでしょうか? この章では、CSS または HTML を使用して三角形を描画する方法を紹介します。三角形を作成する 2 つの異なる方法 (コード例)。純粋な CSS コードを使用して三角形を描画する方法、または HTML5 を使用して三角形を描画する方法をみんなに知らせてください。困っている友人は参考にしていただければ幸いです。
1. cssのborder属性を使って三角形の描画を実現します
コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border 属性--绘制三角形</title>
<style>
.demo{
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>レンダリング:
 "153673408920672CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)")
cssのborder属性を使って三角形を実現する原理:cssボックスモデル
モデルにはマージン+ボーダー+パディング+コンテンツが含まれており、上下左右の境界線の交点に滑らかな対角線が表示されます。この機能を使用すると、小さな三角形、小さな台形などを取得できます。上下左右の境界線の幅や色を変更して、三角形の形状を調整します。
 "153673478138812CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)")
他の色をすべて削除してオレンジ色だけを残すと、三角形が得られます:
 "153673506972770CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)")
を使用すると、三角形の描画を実現できます .demo {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
} レンダリング:
html5のcanvasキャンバスを使用すると、三角形描画の要点を理解できます:
三角形が入っている キャンバス内の3つの座標: moveTo(10,10)----左上隅の座標、ctx.lineTo (110,10)-----右上隅の座標、ctx.lineTo(60,50)---- 以下の座標
以上がCSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。