この記事では、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中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

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

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

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

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

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

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


ホット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 脆弱性のいくつかを実践することです。このソフトウェアは、

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

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

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
