フロントエンド開発を行っているとき、ドロップダウン リストの逆三角形のグラフィックなど、ページの効果を高めるために小さなグラフィックが必要になることがあります。では、このような三角形はどのようにして作られるのでしょうか? この章では、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のborder属性を使って三角形を実現する原理:cssボックスモデル
モデルにはマージン+ボーダー+パディング+コンテンツが含まれており、上下左右の境界線の交点に滑らかな対角線が表示されます。この機能を使用すると、小さな三角形、小さな台形などを取得できます。上下左右の境界線の幅や色を変更して、三角形の形状を調整します。
高さと幅の両方を 0 に設定すると、次のようになります。 :
他の色をすべて削除してオレンジ色だけを残すと、三角形が得られます:
2. HTML5 の
を使用すると、三角形の描画を実現できます .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 サイトの他の関連記事を参照してください。
「CSS4」アップデートApr 11, 2025 pm 12:05 PM私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある
3種類のコードApr 11, 2025 pm 12:02 PM新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います
HTTPSは簡単です！Apr 11, 2025 am 11:51 AM私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました
JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AMJavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。
最新のCSS機能を備えたカスタムスタイリングフォーム入力Apr 11, 2025 am 11:45 AM最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません
HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AMプロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
Dreamweaver Mac版
ビジュアル Web 開発ツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
