當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

css制作对话框

發布時間：2023/11/27 生活经验 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 css制作对话框小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

當你發現好多圖都能用css畫出來的時候，你就會覺得css很有魅力了。//我是這么覺得的，先不考慮什么兼容問題

像漫畫里出現的對話框，往往都是一個對話框然后就加入一個箭頭指向說話的那一方，來表示這個內容是誰述說的。

? ? ?今天認真學了一下：相關資料

首先，要知道一個對話框無非就是一個矩形和一個小三角的契合，想起小學時候教的七巧板；

所以簡單來說，只要能制作出矩形和小三角即可；

? ? ?矩形，一個普通塊都可以算得上是矩形了，只要有足夠的width和height；

? ? ?那么三角形呢，這才是難點，起初完全沒去研究過原來三角形可以是這么回事，在剛開始接觸border的時候，只知道給塊畫個邊框然后就知道了塊的大小；

　　但是border的世界真的是博大精深，當給足了它顏色與寬度，它就有了改變世界的能力。

對于上圖，實際的實現也是很簡單

 1        .div-border{
 2             width: 0px;
 3             height: 0px;
 4             border-top-color: #ccFF99;
 5             border-right-color: #ff0099;
 6             border-bottom-color: #00ff99;
 7             border-left-color: #9900ff;
 8             border-width: 50px;
 9             border-style: solid;
10         }
11         .div-trangle{
12             width: 0px;
13             height: 0px;
14             border-color: transparent #000;
15             border-width: 50px;
16             border-style: solid;
17         }

以上的css，兩個類，一個就是實現上圖的四種顏色，之所以會這樣，顏色由border-color來去定義，而border-width則是邊框寬度，針對top邊框來說，border-width或者是border-top-width可以說就是最上面那個三角形的高，即直角頂點到水平邊的垂直距離；//哎呀，我不想說的那么數學化- -

之所以會變成三角形，也就是因為實際的內容width和高度都變成0了，這個其實可以自行在chrome控制臺邊控制樣式，邊查看頁面效果。

另外一個類主要區別在于border-color里取了transparent，這個值表示透明，效果自行演示咯。

 1 <body>
 2         <div style="height:200px;">
 3             <div class="div-border">
 4                 
 5             </div>
 6         </div>
 7         <div style="height:200px;">
 8             
 9             <div class="div-trangle">
10                 
11             </div>
12         </div>
13 </body>

?既然能得到三角形，那么怎么讓矩形跟三角形位置上的組合呢？這個就要看html的一個文檔流和position概念了，其實我也不是很熟。

大概原理是讓矩形具有position:relative的屬性，而讓三角形歸屬與矩形塊中，并且擁有position:absolute的屬性，此后，三角形就可以通過top\right\left\bottom屬性值的設置來移動三角形對于其父元素矩形的位置，從而達到完美契合。

  1 <html>
  2     <head>
  3         <title>對話框</title>
  4         <style type="text/css">
  5         *{
  6             margin: 0;
  7             padding: 0;
  8         }
  9         .div-mid{
 10             margin: 0 auto;
 11             width: 800px;
 12             height: 600px;
 13         }
 14         .div-diabox{
 15             width: 200px;
 16             border-style: solid;
 17             border-width: 1px;
 18             border-radius: 10px;
 19             border-color: #CCCC33;
 20             background-color: #FFFF99;
 21             position: relative;
 22             margin: 0 auto;
 23             padding:30px;
 24             top: 30px;
 25         }
 26         .div-diabox .arrow-bottom-out{
 27             width: 0px;
 28             height: 0px;
 29             border-style: solid;
 30             border-color: #CCCC33 transparent transparent transparent;
 31             border-width: 10px;
 32             position: absolute;
 33             top: 79px;
 34             left: 10px;
 35         }
 36         .div-diabox .arrow-bottom-in{
 37             width: 0px;
 38             height: 0px;
 39             border-style: solid;
 40             border-color: #FFFF99 transparent transparent transparent;
 41             border-width: 10px;
 42             position: absolute;
 43             top: 78px;
 44             left: 10px;
 45         }
 46         .div-diabox .arrow-top-out{
 47             width: 0px;
 48             height: 0px;
 49             border-style: solid;
 50             border-color: transparent transparent #CCCC33 transparent;
 51             border-width: 10px;
 52             position: absolute;
 53             top: -20px;
 54             right: 10px;
 55         }
 56         .div-diabox .arrow-top-in{
 57             width: 0px;
 58             height: 0px;
 59             border-style: solid;
 60             border-color: transparent transparent #FFFF99 transparent;
 61             border-width: 10px;
 62             position: absolute;
 63             top: -19px;
 64             right: 10px;
 65         }
 66         .div-diabox .arrow-right-out{
 67             width: 0px;
 68             height: 0px;
 69             border-style: solid;
 70             border-color: transparent transparent transparent #CCCC33;
 71             border-width: 10px;
 72             position: absolute;
 73             top: 10px;
 74             right: -20px;
 75         }
 76         .div-diabox .arrow-right-in{
 77             width: 0px;
 78             height: 0px;
 79             border-style: solid;
 80             border-color: transparent transparent transparent #FFFF99;
 81             border-width: 10px;
 82             position: absolute;
 83             top: 10px;
 84             right: -19px;
 85         }
 86         .div-diabox .arrow-left-out{
 87             width: 0px;
 88             height: 0px;
 89             border-style: solid;
 90             border-color: transparent #CCCC33 transparent transparent;
 91             border-width: 10px;
 92             position: absolute;
 93             top: 10px;
 94             left: -20px;
 95         }
 96         .div-diabox .arrow-left-in{
 97             width: 0px;
 98             height: 0px;
 99             border-style: solid;
100             border-color: transparent #FFFF99 transparent transparent;
101             border-width: 10px;
102             position: absolute;
103             top: 10px;
104             left: -19px;
105         }
106         </style>
107     </head>
108 
109     <body>
110         <div class="div-mid">
111             <div class="div-diabox">
112                 <span class="arrow-bottom-out"></span>
113             <span class="arrow-bottom-in"></span>
114             雷猴碼
115             </div>
116             <br/>
117             <br />
118             <div class="div-diabox">
119                 <span class="arrow-top-out"></span>
120             <span class="arrow-top-in"></span>
121             雷猴碼
122             </div>
123             <br/>
124             <br />
125             <div class="div-diabox">
126                 <span class="arrow-right-out"></span>
127             <span class="arrow-right-in"></span>
128             雷猴碼
129             </div>
130             <br/>
131             <br />
132             <div class="div-diabox">
133                 <span class="arrow-left-out"></span>
134             <span class="arrow-left-in"></span>
135             雷猴碼
136             </div>
137             
138         </div>
139     </body>
140 </html>

效果圖：

當時看到這個效果的時候，還沒自己實現之前，就有一個疑問，那就是三角形的顏色問題，因為三角形就是一個border,一條邊而不是一個塊，不能擁有多種顏色，所以實際上一個border只是一個實心顏色的圖形，那怎么辦呢？

解決方案是復制多一個border三角形，當然顏色要不同，只要讓其位置上重疊，底部著漏出一點邊，從而達到有邊效果的三角形（實際是重疊的兩個三角形）。

關于位置移動問題，我覺得自己研究還是挺好玩的，不過就是沒拿到訣竅的感覺，還是要自己去算一下。

轉載于:https://www.cnblogs.com/dont27/p/3687737.html

總結

以上是生活随笔為你收集整理的css制作对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：枸杞多少钱一斤啊？
下一篇： C# async await 学习笔记2