不简单的消息框
Posted cy的小天地
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不简单的消息框相关的知识，希望对你有一定的参考价值。
前几天在做项目的时候遇到一个难点，就是怎么才能用纯代码写一个漂亮的消息框呢？
我这里的消息框指的是有指向的消息框，附上图：
像这样的消息框，一开始总觉得它不是代码写出来的。后来在观察中发现了一种方法，我觉得是很不错的一种写法。
记录总是可以加深印象，对自身乃至项目需要的朋友都会是一种帮助。代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文档标题</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 img{ 13 border:0; 14 } 15 ol, ul ,li{list-style: none;} 16 .menu{ 17 width: 100px; 18 z-index: 2; 19 border: 1px solid #adc3d9; 20 border-radius: 4px; 21 background-color: #fff; 22 position: relative; 23 margin-top: 50px; 24 margin-left: 50px; 25 } 26 .cor{ 27 position: absolute; 28 top: -15px; 29 right: 8px; 30 border-width: 7px; 31 border-style: solid; 32 border-color: transparent transparent #adc3d9; 33 } 34 .cor-in{ 35 position: absolute; 36 top: -4px; 37 left: -6px; 38 border-width: 6px; 39 border-style: solid; 40 border-color: transparent transparent #fff; 41 } 42 .con{ 43 padding: 10px; 44 box-sizing: border-box; 45 } 46 </style> 47 <body> 48 49 <div class="menu"> 50 <div class="cor"> 51 <div class="cor-in"></div> 52 </div> 53 <div class="con"> 54 最新消息 55 最新消息 56 最新消息 57 </div> 58 </div> 59 60 </body> 61 </html>
以上是关于不简单的消息框的主要内容，如果未能解决你的问题，请参考以下文章