zoukankan      html  css  js  c++  java
  • css实现三角效果

    demo

     
     
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset=utf-8>
    <title>demo</title>
    </head>
    
    <style>
    #demo{
      width:100px; 
      height:100px; 
      border:2px solid #000;
    }
    #demo:before{
      content:''; 
      display:block; 
      width:0; 
      height:0; 
      position:relative; 
      top:10px; 
      left:100px; 
      border-left:9px solid #000; 
      border-top:7px solid transparent; 
      border-bottom:7px solid transparent;
    }
    #demo:after{
      content:''; 
      display:block; 
      width:0; 
      height:0; 
      position:relative; 
      top:-2px; 
      left:100px; 
      border-left:7px solid #fff; 
      border-top:5px solid transparent; 
      border-bottom:5px solid transparent;
    }
    #s{
      width:0; 
      height:0; 
      border-left:20px solid transparent;       /**/
      border-right:20px solid transparent;      /**/
      border-top:20px solid transparent;        /**/
      border-bottom:20px solid green;           /**/
    }
    </style>
    <body>
       <div id='demo'></div>
    
    
       <div id="s"></div>
    </body>  
    </html>
  • 相关阅读:
    云南网页首页布局全代码
    表格样式(鼠标经过时整行变色)
    做自定义圆角矩形
    网页布局
    黄冈中学首页的模板简图
    动态网页简版
    十字绣首页设计
    go组合
    http rpc关联
    php echo print
  • 原文地址:https://www.cnblogs.com/ccxiaomaomi/p/5650802.html
Copyright © 2011-2022 走看看