zoukankan      html  css  js  c++  java
  • 用css伪类实现提示框效果

    题目要求用css实现下图效果:


    很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了“那么点东西”,然后设置其边框,形成一黑色三角形,在用after造出另一白色三角形,让白色三角形位置向后移动,正好流出黑色三角形边框:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>testcss</title>
    <style>
    #demo{
       100px;
      height:100px;
      border:2px solid #000;
    }
    #demo:before{
      content:'';
      display: block;
       1px;
      height:1px;
      position: relative;
      top:20px;
      left:100px;
      border-left: 20px solid #000;
      border-top:15px solid transparent;
      border-bottom:15px solid transparent;
    }
    #demo:after{
      content:'';
      display: block;
       1px;
      height:1px;
      position: relative;
      top:-11px;
      left:97px;
      border-left: 20px solid #fff;
      border-top:15px solid transparent;
      border-bottom:15px solid transparent;
    }
    
    
    </style>
    <script type="text/javascript">
    window.onload=function(){
    }
    </script>
    </head>
    <body>
      <div id='demo'></div>
    </body>
    </html>
    


  • 相关阅读:
    左旋转字符串
    swoole(8)http服务
    整数反转
    两数之和
    广度优先搜索
    快速排序
    JavaScript当中的eval函数
    JavaScript中的作用域链原理
    git push和git pull
    cherry-pick,revert和rebase使用的3-way合并策略
  • 原文地址:https://www.cnblogs.com/chayangge/p/4288690.html
Copyright © 2011-2022 走看看