zoukankan      html  css  js  c++  java
  • CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    Triangle Up

     
     
    1
    2
    3
    4
    5
    6
    7
    #triangle-up {
        width0;
        height0;
        border-left50px solid transparent;
        border-right50px solid transparent;
        border-bottom100px solid red;
    }

       

    Triangle Down

     
     
    1
    2
    3
    4
    5
    6
    7
    #triangle-down {
        width0;
        height0;
        border-left50px solid transparent;
        border-right50px solid transparent;
        border-top100px solid red;
    }

       

    Triangle Left

     
     
    1
    2
    3
    4
    5
    6
    7
    #triangle-left {
        width0;
        height0;
        border-top50px solid transparent;
        border-right100px solid red;
        border-bottom50px solid transparent;
    }

      

    Triangle Right

     
     
    1
    2
    3
    4
    5
    6
    7
    #triangle-right {
        width0;
        height0;
        border-top50px solid transparent;
        border-left100px solid red;
        border-bottom50px solid transparent;
    }

      

    Triangle Top Left

     
     
    1
    2
    3
    4
    5
    6
    #triangle-topleft {
        width0;
        height0;
        border-top100px solid red;
        border-right100px solid transparent;
    }

      

    Triangle Top Right

     
     
    1
    2
    3
    4
    5
    6
    7
    #triangle-topright {
        width0;
        height0;
        border-top100px solid red;
        border-left100px solid transparent;
     
    }

      

    Triangle Bottom Left

     
     
    1
    2
    3
    4
    5
    6
    #triangle-bottomleft {
        width0;
        height0;
        border-bottom100px solid red;
        border-right100px solid transparent;
    }

      

    Triangle Bottom Right

     
     
    1
    2
    3
    4
    5
    6
    #triangle-bottomright {
        width0;
        height0;
        border-bottom100px solid red;
        border-left100px solid transparent;
    }
  • 相关阅读:
    Vxlan基础理解
    ODPS基础
    关系型和非关系型数据库的区别?
    交换机的互连技术
    MYSQL 查看最大连接数和修改最大连接数
    Ceph添加/删除Mon(ceph.conf)
    java 线程的几个注解
    UML建模之类图
    单例模式的N种写法
    java工具jar包—Lombok
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4160636.html
Copyright © 2011-2022 走看看