原码笔记

原码笔记

DIV+CSS实现带三角箭头的提示框

小诸哥 0

实现效果

实现代码

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3.   <head>   
  4.     <meta charset="UTF-8">   
  5.     <link rel="shortcut icon" href="resources/img/logo-color.png" type="image/x-icon">   
  6.     <title>测试</title>   
  7.     <style>   
  8.     .out-div {   
  9.         color#FFFFFF;   
  10.         font-size16px;   
  11.         line-height40px;   
  12.         displayinline-block;   
  13.         height40px;   
  14.         width200px;   
  15.         text-aligncenter;   
  16.         border-radius: 5px;   
  17.         margin-left32px;   
  18.         vertical-aligntop;   
  19.         background-colormaroon;   
  20.     }   
  21.     .arrow {   
  22.         width0px;   
  23.         height0px;   
  24.         border-top10px solid transparent;   
  25.         border-right10px solid;   
  26.         border-bottom10px solid&nbsp;transparent;   

标签: CSS 实现 提示框