zoukankan      html  css  js  c++  java
  • css画三角的原理

    当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片

    此时如果设置这个div的height为0的话,其他不变,会得到下面这个图形

    下面把其宽度也设置为0后,得到如下的一张图片

    删除border-bottom

    设置border-left border-right 颜色为transparent

    根据上面我们就可以根据不同的设置,实现各种三角形

    总结如下:

     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-top:100px solid #000;
                border-right:100px solid transparent;
                border-left:100px solid transparent;
            }

     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-bottom:100px solid blue;
                border-right:100px solid transparent;
                border-left:100px solid transparent;
            }

    .demo
    { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid red; }
    
    
     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-top:100px solid transparent;
                border-bottom:100px solid transparent;
                border-left:100px solid #00ff00;
            }

    
    
     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-bottom:100px solid blue;
                border-left:100px solid transparent;
            }
    
    
     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-top:100px solid #transparent;
                border-left:100px solid #00ff00;
            }

    
    
     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-top:100px solid #000;
                border-left:100px solid trnasparent;
            }
    
    
     .demo {
                width: 0px;
                height: 0px;
                margin: 100px auto;
                border-bottom:100px solid transparent;
                border-left:100px solid #00ff00;
            }

    
    
  • 相关阅读:
    Biba模型简介
    Fragment 与 Activity 通信
    小米2S 连接Ubuntu Android Studio
    【转】Android 实现“再按一次退出程序”
    取消 EditText 自动聚焦弹出输入法界面
    为Android Studio 项目手动下载gradle
    【转】Java读取文件方法大全
    sudo: /etc/sudoers 的模式为 0551,应为 0440
    Win7 下硬盘安装Linux Mint 17
    Linux Versus Windows, Ubuntu/Mint V XP/Vista/7
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6140005.html
Copyright © 2011-2022 走看看