zoukankan      html  css  js  c++  java
  • 关于CSS3三角的实现

    1,向上的三角

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>border-radius</title>
     6 <style>
     7 div{ 
     8     width:0;
     9     height:0;
    10     border-left:20px solid transparent;
    11     border-right:20px solid transparent;
    12     border-bottom:20px solid #ccc;
    13     }
    14 </style>
    15 </head>
    16 <body>
    17 <div>
    18 </div>
    19 </body>
    20 </html>

    2,向下的三角

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>border-radius</title>
     6 <style>
     7 div{ 
     8     width:0;
     9     height:0;
    10     border-left:20px solid transparent;
    11     border-right:20px solid transparent;
    12     border-top:20px solid #ccc;
    13     }
    14 </style>
    15 </head>
    16 <body>
    17 <div>
    18 </div>
    19 </body>

    20 </html> 

    3,向左的三角

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>border-radius</title>
     6 <style>
     7 div{ 
     8     width:0;
     9     height:0;
    10     border-top:20px solid transparent;
    11     border-bottom:20px solid transparent;
    12     border-right:20px solid #ccc;
    13     }
    14 </style>
    15 </head>
    16 <body>
    17 <div>
    18 </div>
    19 </body>

    20 </html> 

    4,向右的三角

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>border-radius</title>
     6 <style>
     7 div{ 
     8     width:0;
     9     height:0;
    10     border-top:20px solid transparent;
    11     border-bottom:20px solid transparent;
    12     border-left:20px solid #ccc;
    13     }
    14 </style>
    15 </head>
    16 <body>
    17 <div>
    18 </div>
    19 </body>

    20 </html> 

  • 相关阅读:
    C#调用VC++.net托管库程序集DLL
    SQL Server 2008 评估期已过期解决办法
    TFS2010安装(转)
    将dll添加到GAC(Global Assembly Cache)中
    LINQ to SQL with NOLOCK
    SQL Server 2008创建定期自动备份任务(转)
    问题解决记录(一)
    控制台读入
    数据库
    a标签的onclick与href的执行顺序
  • 原文地址:https://www.cnblogs.com/White-Quality/p/4510668.html
Copyright © 2011-2022 走看看