コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル css实现小三角（原理） - 林七七

css实现小三角（原理） - 林七七

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 21, 2016 am 08:54 AM
效果图如图1所示：（简单示范，有点丑，莫介意）
PS:兼容IE，FF , chrome ,360安全浏览器
先讲下原理吧，如图2所示：
这个div的样式如下所示：

1

2

3

4

5

6

7

<span style="font-size: 15px;"><span style="color: #800000;">div</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">

    border-width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">

    border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">

    border-color</span>:<span style="color: #0000ff;"> lightgreen pink yellow lightblue</span>;

}</span>

ログイン後にコピー
解释：当div的宽高为0时，设border的宽度并设颜色，会发现div像是被分割为4个小三角形，
           因此当我们要其中一个小三角时，只需要将其它三个隐藏即可（方法：把那三条边颜色设为transparent即可）。
 
上三角：（图3）
 
对应的CSS代码：
 

1

2

3

4

5

6

7

<span style="font-size: 15px;"><span style="color: #800000;">#triangle</span>{<span style="color: #ff0000;">

    width</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">

    height</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">

    border-width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">

    border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">

    border-color</span>:<span style="color: #0000ff;"> transparent transparent yellow transparent</span>;

}</span>

ログイン後にコピー
 
为了让它尽可能适应各种浏览器，我们多添加几行代码（主要是解决IE的兼容问题）：

1

2

3

4

5

6

7

8

9

10

11

12

<span style="font-size: 15px;"><span style="color: #008080;"> 1</span> <span style="color: #800000;">#triangle</span>{

<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0px</span>;

<strong><span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    *width</span>:<span style="color: #0000ff;"> 40px</span>;  

<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    *height</span>:<span style="color: #0000ff;"> 40px</span>;

<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    font-size</span>:<span style="color: #0000ff;"> 0</span>;

<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 0</span>;

<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;</strong>

<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 20px</span>;

<strong><span style="color: #008080;">10</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> dashed dashed solid dashed</span>;

<span style="color: #008080;">11</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent transparent yellow transparent</span>;</strong>

<span style="color: #008080;">12</span> }</span>

ログイン後にコピー
解释：
①border-color: transparent transparent yellow transparent;
    因为我们要的是上三角，根据图2，我们要保留的是下边框，故把其他三条边设为transparent；
②border-style: dashed dashed solid dashed;
    把其他三边设为dashed，是因为IE6不支持透明属性transparent，故我们把其它三边的样式设为
    dashed，dashed在边框宽度很大时，会隐藏。（因为我的电脑没有ie6，所以没有实践过，这一点有点抱歉）
③font-size: 0;    line-height: 0;    overflow: hidden;
    如果不加这三句，会出现以下效果：
即在IE下，出现的不是三角形，而是梯形。
④最后多加了两句css hack:  *width: 40px;     *height: 40px;
    当时用IE测试效果时，我发现根本找不到小三角，在网上搜各种博客也搜不到相关问题，后来随手加了句
    width&height的样式，小三角就出现了，感觉应该是在IE下，div的宽高是包括border的（对于这点还是不太懂，希望有大牛给予解答）。
    为了解决IE下的这个问题，我最后就加了这两句css hack。如果觉得不保险，还可以再加上" _width: 40px;     _height: 40px;"
PS: ① IE6和IE7能识别"*"，IE6能识别"_"，具体搜索“CSS hack”。
      ② *width应设为 border-width 的两倍，*height同理。
 
对于下三角，左三角，右三角，只需改变上三角中的两句CSS即可，其他无需改变，改变的代码分别如下所示。
下三角：

1

2

<span style="color: #800000; font-size: 15px;">border-style: solid dashed dashed dashed;

border-color: lightgreen transparent transparent transparent;</span>

ログイン後にコピー
左三角：

1

2

<span style="color: #800000; font-size: 15px;">border-style: dashed solid dashed dashed;

border-color: transparent pink transparent transparent;</span>

ログイン後にコピー
右三角：

1

2

<span style="color: #800000; font-size: 15px;">border-style: dashed dashed dashed solid;

border-color: transparent transparent transparent lightblue;</span>

ログイン後にコピー

 

最后，给出效果图1的代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<span style="font-size: 15px;"><span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> css </span><span style="color: #008000;">*/</span>

<span style="color: #008080;"> 2</span> <span style="color: #800000;">*</span>{

<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;

<span style="color: #008080;"> 6</span> }

<span style="color: #008080;"> 7</span> <span style="color: #800000;">#container</span>{

<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">  //这句很重要，因为小三角是相对父元素#container来绝对定位的

</span><span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 50px</span>;

<span style="color: #008080;">10</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 40px</span>;

<span style="color: #008080;">11</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid lightblue</span>;

<span style="color: #008080;">12</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 200px auto</span>;

<span style="color: #008080;">13</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 20px</span>;

<span style="color: #008080;">14</span> 

<span style="color: #008080;">15</span> }

<span style="color: #008080;">16</span> <span style="color: #800000;">#chat</span>{

<span style="color: #008080;">17</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 50px</span>;

<span style="color: #008080;">18</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 40px</span>;

<span style="color: #008080;">19</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;

<span style="color: #008080;">20</span> }

<span style="color: #008080;">21</span> <span style="color: #800000;">#triangle</span>{

<span style="color: #008080;">22</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">   //设置小三角绝对定位

</span><span style="color: #008080;">23</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;">24</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;">25</span> <span style="color: #ff0000;">    *width</span>:<span style="color: #0000ff;"> 14px</span>;

<span style="color: #008080;">26</span> <span style="color: #ff0000;">    *height</span>:<span style="color: #0000ff;"> 14px</span>;

<span style="color: #008080;">27</span> <span style="color: #ff0000;">    font-size</span>:<span style="color: #0000ff;"> 0</span>;

<span style="color: #008080;">28</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 0</span>;

<span style="color: #008080;">29</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;

<span style="color: #008080;">30</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 7px</span>;

<span style="color: #008080;">31</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> dashed dashed dashed solid</span>;

<span style="color: #008080;">32</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent transparent transparent lightblue</span>;

<span style="color: #008080;">33</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;"> 33px</span>;<span style="color: #ff0000;">   //33px：父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px

</span><span style="color: #008080;">34</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;"> 70px</span>;<span style="color: #ff0000;">  //70px</span>:<span style="color: #0000ff;">  #chat的宽度50px + 父元素#container的内边距20px =70px

</span><span style="color: #008080;">35</span> }</span>

ログイン後にコピー
 

1

2

3

4

5

<span style="font-size: 15px;"><span style="color: #008000;">/*</span><span style="color: #008000;"> html代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">

<div id="container">

    <div id="chat"></div>

    <div id="triangle"></div>

</div></span></span>

ログイン後にコピー

 

如有不足之处，欢迎批评建议，  O(∩_∩)O谢谢
 
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
1 か月前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前 By DDD
KB5055523を修正する方法Windows 11にインストールできませんか？
2週間前 By DDD
Inzoi：学校と大学への応募方法
3週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7747
15
Java チュートリアル
1643
14
CakePHP チュートリアル
1397
52
Laravel チュートリアル
1291
25
PHP チュートリアル
1234
29
もっと見る
Related knowledge
HTMLは初心者のために簡単に学ぶことができますか？ HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する

WebアノテーションにY軸位置の適応レイアウトを実装する方法は？ WebアノテーションにY軸位置の適応レイアウトを実装する方法は？ Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？ CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？ Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

HTML、CSS、およびJavaScript：Web開発者に不可欠なツール HTML、CSS、およびJavaScript：Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

See all articles