设为首页收藏本站
开启辅助访问

IITT网络服务中心

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
IITT网络服务中心»客服中心 › 网站建设 › 前端开发 › 纯css制作三角箭头提示框
返回列表 发新帖
查看: 6827|回复: 0
打印 上一主题 下一主题

纯css制作三角箭头提示框

[复制链接]
admin

456

主题

402

帖子

1781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1781
跳转到指定楼层
楼主
发表于 2016-4-14 21:35:52 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
样式：

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>
复制代码
制作
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|IITT网络服务中心    

GMT+8, 2025-2-23 01:13 , Processed in 0.035342 second(s), 30 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表