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
總結
- 上一篇： 枸杞多少钱一斤啊？
- 下一篇： C# async await 学习笔记2