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;
    }
  • 相关阅读:
    Mysql 常用函数(34)- week 函数
    Mysql 常用函数(33)- dayofmonth 函数
    Mysql 常用函数(32)- dayofyear 函数
    Mysql 常用函数(31)- dayofweek 函数
    Mysql 常用函数(30)- month 函数
    Mysql 常用函数(29)- sysdate 函数
    Mysql 常用函数(28)- datediff 函数
    Mysql 常用函数(27)- now 函数
    Azure Messaging-ServiceBus Messaging消息队列技术系列1-基本概念和架构
    Oracle 12c In Memory Option初探
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4160636.html
Copyright © 2011-2022 走看看