この記事では、CSS を使用して三角形を描画するための N 個のテクニックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
一部のインタビューでは、CSS に関する質問がよくあります。CSS を使用して三角形を描く方法。その答えは次のとおりです。通常、境界線を使用して描画する方法は 1 つだけです。
今日の CSS の発展により、CSS のみを使用して三角形を描画する興味深い方法が実際にたくさんあります。この記事ではそれらを詳しくリストします。
この記事では、CSS を使用して三角形を描画する 6 つの方法を学ぶことができます。それらはすべて非常に簡単に習得できます。もちろん、この記事は単なる紹介です。CSS は日々変化しています。この記事に記載されていない興味深いメソッドがいくつかあるかもしれません。メッセージ エリアに追加してください~
#境界線を使用して三角形を描画する
境界線の実装三角形は、ほとんどの人がマスターする必要があり、さまざまな側面でもよく見られます。高さと幅がゼロのコンテナーと透明な境界線を使用します。実装。 簡単なコードは次のとおりです:div { border-top: 50px solid yellowgreen; border-bottom: 50px solid deeppink; border-left: 50px solid bisque; border-right: 50px solid chocolate; }高さと幅がゼロのコンテナに、異なる色の境界線を設定します:
透明 であれば、さまざまな角度の三角形を簡単に取得できます。
CodePen デモ - 境界線を使用して三角形を実装する https://codepen.io/Chokcoco/pen/GqrVpB
線形グラデーションを使用して三角形を描画する
次に、線形グラデーションを使用します。linear-gradient は三角形を実装します。
45° のグラデーションを実装します:
div { width: 100px; height: 100px; background: linear-gradient(45deg, deeppink, yellowgreen); }
div { width: 100px; height: 100px; background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%); }
div { background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%); }
rotate または
scale, さまざまな角度やサイズの三角形を取得することもできます。完全なデモはここをクリックできます:
CodePen デモ - 線形グラデーションを使用して、三角形を実装するhttps://codepen.io/Chokcoco/pen/RwKKOZw
円錐グラデーションを使用して三角形を描画します
まだグラデーション、上記では三角形の実装に線形グラデーションを使用しましたが、興味深いことに、グラデーション ファミリでは、角度グラデーションconic-gradient も三角形の実装に使用できます。
角度勾配の中心点を設定できるであり、放射状勾配と同様の円の中心点も設定できます。
角度勾配の中心点を50% 0 (コンテナの上部の中央である
center top) に設定し、次の操作を実行します。角度勾配、勾配 特定の角度範囲内では、それらはすべて三角形の形状になります。
200px x 100px のコンテナーがあり、その角度グラデーションの中心点を
50% 0 に設定するとします。
90° から始まる角度勾配図を描画するように設定します。概略図は次のとおりです。ご覧のとおり、最初の角度グラデーション グラフィックが 2 番目の辺に到達すると、すべて三角形になります。適切な角度を選択すると、簡単に三角形を取得できます。 # 上記のコードの
ディープピンク 45 度、透明 45.1 度
conic-gradient を使用し、また、簡単に取得できます三角形。
同様に、回転
rotate または scale
CodePen デモ - 角度グラデーションを使用した三角形の実装
https://codepen.io/Chokcoco/pen/qBRRZJr
この方法は比較的従来のもので、
transform:rotate
と
を使用します。ひと目で理解でき、一目で覚えられる簡単なアニメーション図は次のとおりです。
设置图形的旋转中心在左下角
left bottom
,进行旋转,配合overflow: hidden
。完整的代码:
.triangle { width: 141px; height: 100px; position: relative; overflow: hidden; &::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: deeppink; transform-origin: left bottom; transform: rotate(45deg); } }CodePen Demo - transform: rotate 配合 overflow: hidden 实现三角形
https://codepen.io/Chokcoco/pen/LYxyyPv
使用 clip-path 绘制三角形
clip-path
一个非常有意思的 CSS 属性。
clip-path
CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。也就是说,使用
clip-path
可以将一个容器裁剪成任何我们想要的样子。通过 3 个坐标点,实现一个多边形,多余的空间则会被裁减掉,代码也非常简单:
div { background: deeppink; clip-path: polygon(0 0, 100% 0, 0 100%, 0 0); }
CodePen Demo - 使用 clip-path 实现三角形
https://codepen.io/Chokcoco/pen/GRrmEzY
在这个网站中 -- CSS clip-path maker,你可以快捷地创建简单的
clip-path
图形,得到对应的 CSS 代码。
利用字符绘制三角形
OK,最后一种,有些独特,就是使用字符表示三角形。
下面列出一些三角形形状的字符的十进制 Unicode 表示码。
◄ : ◄ ► : ► ▼ : ▼ ▲ : ▲ ⊿ : ⊿ △ : △譬如,我们使用
▼
实现一个三角形 ▼,代码如下:<div class="normal">▼ </div>div { font-size: 100px; color: deeppink; }效果还是不错的:
然而,需要注意的是,使用字符表示三角形与当前设定的字体是强相关的,不同的字体绘制出的同一个字符是不一样的,我在 Google Font 上随机选取了几个不同的字体,分别表示同一个字符,得到的效果如下:
可以看到,不同字体的形状、大小及基线都是不一样的,所以如果你想使用字符三角形,确保用户的浏览器安装了你指定的字体,否则,不要使用这种方式。
完整的对比 Demo,你可以戳这里:
CodePen Demo - 使用字符实现三角形
https://codepen.io/Chokcoco/pen/abpWyzy
最后
好了,本文到此结束,关于使用 CSS 绘制三角的 6 种不同方式,希望对你有帮助 :)
原文地址:https://segmentfault.com/a/1190000039808190
作者:chokcoco
更多编程相关知识,请访问:编程视频!!
以上がCSS で三角形を描画するための 6 つのヒント (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1
使いやすく無料のコードエディター

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
