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> 

  • 相关阅读:
    快捷键 Msg消息
    类 多态(迟绑定)
    DLL发布 matlab代码发布
    获取ini内容 GetPrivateProfileString GetPrivateProfileInt
    路径操作 getModuleFileName() 等
    事件高级
    JS事件基础
    运动框架
    运动小宗
    workman安装使用
  • 原文地址:https://www.cnblogs.com/White-Quality/p/4510668.html
Copyright © 2011-2022 走看看