検索
ホームページウェブフロントエンドCSSチュートリアルCSS で三角形を描画するための 6 つのヒント (共有)

この記事では、CSS を使用して三角形を描画するための N 個のテクニックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

CSS で三角形を描画するための 6 つのヒント (共有)

一部のインタビューでは、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;
}

高さと幅がゼロのコンテナに、異なる色の境界線を設定します:

CSS で三角形を描画するための 6 つのヒント (共有)

この例では、 3 辺の境界線の色が

透明 であれば、さまざまな角度の三角形を簡単に取得できます。

CSS で三角形を描画するための 6 つのヒント (共有)

CodePen デモ - 境界線を使用して三角形を実装する

https://codepen.io/Chokcoco/pen/GqrVpB

線形グラデーションを使用して三角形を描画する

次に、線形グラデーションを使用します。

linear-gradient は三角形を実装します。

その原理も非常に単純で、

45° のグラデーションを実装します:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

CSS で三角形を描画するための 6 つのヒント (共有)

その色をグラデーション カラーから変更させます。 2 つの固定色に変更します:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

CSS で三角形を描画するための 6 つのヒント (共有)

次に、いずれかの色を透明にします:

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

CSS で三角形を描画するための 6 つのヒント (共有)

Passed Rotate

rotate または scale, さまざまな角度やサイズの三角形を取得することもできます。完全なデモはここをクリックできます:

CodePen デモ - 線形グラデーションを使用して、三角形を実装する

https://codepen.io/Chokcoco/pen/RwKKOZw

円錐グラデーションを使用して三角形を描画します

まだグラデーション、上記では三角形の実装に線形グラデーションを使用しましたが、興味深いことに、グラデーション ファミリでは、角度グラデーション

conic-gradient も三角形の実装に使用できます。

その方法は、

角度勾配の中心点を設定できるであり、放射状勾配と同様の円の中心点も設定できます。

角度勾配の中心点を

50% 0 (コンテナの上部の中央である center top) に設定し、次の操作を実行します。角度勾配、勾配 特定の角度範囲内では、それらはすべて三角形の形状になります。

高さと幅

200px x 100px のコンテナーがあり、その角度グラデーションの中心点を 50% 0 に設定するとします。

CSS で三角形を描画するための 6 つのヒント (共有)

そして、

90° から始まる角度勾配図を描画するように設定します。概略図は次のとおりです。ご覧のとおり、最初の角度グラデーション グラフィックが 2 番目の辺に到達すると、すべて三角形になります。適切な角度を選択すると、簡単に三角形を取得できます。 # 上記のコードの ディープピンク 45 度、透明 45.1 度

は、グラデーションによって引き起こされるエイリアシング効果を単純に除去するためのものです。このように、

conic-gradientCSS で三角形を描画するための 6 つのヒント (共有) を使用し、また、簡単に取得できます三角形。

同様に、回転

rotate

または CSS で三角形を描画するための 6 つのヒント (共有)scale

を使用して、さまざまな角度とサイズの三角形を取得することもできます。完全なデモはここをクリックできます:

CodePen デモ - 角度グラデーションを使用した三角形の実装https://codepen.io/Chokcoco/pen/qBRRZJr

#transform: 回転オーバーフローを使用して三角形を描画します。 hidden

この方法は比較的従来のもので、transform:rotate

overflow:hidden
を使用します。ひと目で理解でき、一目で覚えられる簡単なアニメーション図は次のとおりです。

CSS で三角形を描画するための 6 つのヒント (共有)

设置图形的旋转中心在左下角 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);
}

CSS で三角形を描画するための 6 つのヒント (共有)

CodePen Demo -  使用 clip-path 实现三角形

https://codepen.io/Chokcoco/pen/GRrmEzY

在这个网站中 -- CSS clip-path maker,你可以快捷地创建简单的 clip-path 图形,得到对应的 CSS 代码。

1CSS で三角形を描画するための 6 つのヒント (共有)

利用字符绘制三角形

OK,最后一种,有些独特,就是使用字符表示三角形。

下面列出一些三角形形状的字符的十进制 Unicode 表示码。

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

譬如,我们使用 实现一个三角形 ▼,代码如下:

<div class="normal">&#9660; </div>
div {
    font-size: 100px;
    color: deeppink;
}

效果还是不错的:

1CSS で三角形を描画するための 6 つのヒント (共有)

然而,需要注意的是,使用字符表示三角形与当前设定的字体是强相关的,不同的字体绘制出的同一个字符是不一样的,我在 Google Font 上随机选取了几个不同的字体,分别表示同一个字符,得到的效果如下:

1CSS で三角形を描画するための 6 つのヒント (共有)

可以看到,不同字体的形状、大小及基线都是不一样的,所以如果你想使用字符三角形,确保用户的浏览器安装了你指定的字体,否则,不要使用这种方式。

完整的对比 Demo,你可以戳这里:

CodePen Demo -   使用字符实现三角形

https://codepen.io/Chokcoco/pen/abpWyzy

最后

好了,本文到此结束,关于使用 CSS 绘制三角的 6 种不同方式,希望对你有帮助 :)

原文地址:https://segmentfault.com/a/1190000039808190

作者:chokcoco

更多编程相关知识,请访问:编程视频!!

以上がCSS で三角形を描画するための 6 つのヒント (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

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

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

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

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

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

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

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

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

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

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

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

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

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

私はリリースがないように感じます:正気な展開への旅私はリリースがないように感じます:正気な展開への旅Apr 23, 2025 am 09:19 AM

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

mPDF

mPDF

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

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境