zoukankan      html  css  js  c++  java
  • css对话气泡

    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>css对话气泡</title>

      <style>
      .test-div{
        position: relative;
        150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1) ;

      }
      .test-div:before,.test-div:after{
        content: "";
        display: block;
        position: absolute;
        top:8px;
         0;
        height: 0;
        border:6px transparent solid;
       }
      .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1;

          }
      .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0 ;

      }

    /*前后各画一个三角形,通过改变位置和堆叠顺序,使两个三角形部分覆盖重合*/
      </style>
    </head>
    <body>
      <div class="test-div"></div>
    </body>
    </html>

  • 相关阅读:
    (16)C#继承
    (3)新概念英语一(11-20)lessons
    (15)C#集合
    (14)编码
    (2)新概念英语一(1-10)lessons
    (13)C#数组和元组
    Uva 11729 Commando War
    Uva 11292 Dragon of Loowater
    谈谈单元最短路
    [USACO 3.3.1]骑马修栅栏t
  • 原文地址:https://www.cnblogs.com/shelly1072/p/5222434.html
Copyright © 2011-2022 走看看