検索
ホームページウェブフロントエンド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怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境