CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)-CSSチュートリアル-php.cn

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)

青灯夜游

リリース： 2018-09-12 16:08:04

オリジナル

10668 人が閲覧しました

フロントエンド開発を行っているとき、ドロップダウンリストの逆三角形のグラフィックなど、ページの効果を高めるために小さなグラフィックが必要になることがあります。では、このような三角形はどのようにして作られるのでしょうか? この章では、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>

ログイン後にコピー

レンダリング:

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)

cssのborder属性を使って三角形を実現する原理:cssボックスモデル

モデルにはマージン+ボーダー+パディング+コンテンツが含まれており、上下左右の境界線の交点に滑らかな対角線が表示されます。この機能を使用すると、小さな三角形、小さな台形などを取得できます。上下左右の境界線の幅や色を変更して、三角形の形状を調整します。

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例) 高さと幅の両方を 0 に設定すると、次のようになります。 :

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例) 他の色をすべて削除してオレンジ色だけを残すと、三角形が得られます:

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例) 2. HTML5 の

キャンバス Canvas

を使用すると、三角形の描画を実現できます

.demo {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

ログイン後にコピー

レンダリング:

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例) html5のcanvasキャンバスを使用すると、三角形描画の要点を理解できます:

三角形が入っているキャンバス内の3つの座標: moveTo(10,10)----左上隅の座標、ctx.lineTo (110,10)-----右上隅の座標、ctx.lineTo(60,50)---- 以下の座標

以上がCSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSまたはHTML5を使用して三角形を描くにはどうすればよいですか?三角形を作成する 2 つの異なる方法 (コード例)