IITT网络服务中心

标题: 纯css制作三角箭头提示框 [打印本页]
作者: admin    时间: 2016-4-14 21:35
标题: 纯css制作三角箭头提示框
样式：

html代码
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link rel="stylesheet" type="text/css" href="maopao.css">
  5.         <title>Test</title>
  6.     </head>
  7.     <body>
  8.         <div class="speech-bubble speech-bubble-top">
  9.             箭头在顶部
  10.         </div>
  11.          <br/>
  12.         <div class="speech-bubble speech-bubble-bottom">
  13.             箭头在底部
  14.         </div>
  15.         <br/>
  16.         <div class="speech-bubble speech-bubble-left">
  17.             箭头在左侧
  18.         </div>
  19.          <br/>
  20.         <div class="speech-bubble speech-bubble-right">
  21.             箭头在右侧
  22.         </div>
  23.     </body>
  24. </html>
复制代码
css代码
  1. <style type="text/css">
  2. /*
  3.    对话气泡
  4.    用法：使用.speech-bubble和.speech-bubble-DIRECTION类
  5.    <div class="speech-bubble speech-bubble-top">Hi there</div>
  6. */

  8. .speech-bubble {
  9.   position: relative;
  10.   background-color: #292929;

  12.   width: 200px;
  13.   height: 150px;
  14.   line-height: 150px; /* 垂直居中 */
  15.   color: white;
  16.   text-align: center;
  17.   border-radius: 10px;
  18.   font-family: sans-serif;
  19. }

  21. .speech-bubble:after {
  22.   content: '';
  23.   position: absolute;

  25.   width: 0;
  26.   height: 0;

  28.   border: 15px solid;
  29. }

  31. /* 箭头的位置 */
  32. .speech-bubble-top:after {
  33.   border-bottom-color: #292929;
  34.   left: 50%;
  35.   bottom: 100%;
  36.   margin-left: -15px;  
  37. }
  38. .speech-bubble-right:after {
  39.   border-left-color: #292929;

  41.   left: 100%;
  42.   top: 50%;
  43.   margin-top: -15px;   
  44. }

  46. .speech-bubble-bottom:after {
  47.   border-top-color: #292929;
  48.   top: 100%;
  49.   left: 50%;
  50.   margin-left: -15px;  
  51. }

  53. .speech-bubble-left:after {
  54.   border-right-color: #292929;
  55.   top: 50%;
  56.   right: 100%;
  57.   margin-top: -15px;   
  58. }

  60. </style>
复制代码




欢迎光临 IITT网络服务中心 (http://service.iitt.cc/) Powered by Discuz! X3