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> 

  • 相关阅读:
    SQL函数union,union all整理
    Oracle中的having()函数
    SQL函数count(),sum()理解
    Office Online Server 和 SharePoint 2016配置时报错
    Manjaro 黑苹果网卡BCM4360折腾记
    Manjaro安装与基本配置
    在Arch Linux/Manjaro上安装KVM、QEMU和Virt Manager的方法
    Nginx 优化详解
    xargs 使用详解
    Centos7 搭建lnmp环境 (centos7+nginx+MySQL5.7.9+PHP7)
  • 原文地址:https://www.cnblogs.com/White-Quality/p/4510668.html
Copyright © 2011-2022 走看看