zoukankan      html  css  js  c++  java
  • 纯css实现各种三角形图案

    一、前言

    三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

    二、实现

    2.1 Triangle Up


    #triangle-up {
         0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }

    2.2 Triangle Down

    #triangle-down {
         0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

    2.3 Triangle Left

    #triangle-left {
         0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }

    2.4 Triangle Right

    #triangle-right {
         0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }

    2.5 Triangle Top Left

    #triangle-topleft {
         0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

    2.6 Triangle Top Right

    #triangle-topright {
         0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
     
    }

    2.7 Triangle Bottom Left

    #triangle-bottomleft {
         0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }

    2.8 Triangle Bottom Right

    #triangle-bottomright {
         0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

    原文章来源: https://www.cnblogs.com/chengxs/p/11406278.html


  • 相关阅读:
    微软铁杆兄弟诺基亚开发基于Linux的手机
    Linux目录递归改变文件名大小写
    boa-0.94.13 移植到 ARM
    LINUX如何设置只允许SSH登陆?
    9.4. 使用 I/O 内存
    I-O 端口和 I-O 内存
    Linux 的虚拟文件系统--各结构之间的联系
    Linux 系统调用
    【poj2528】Mayor's posters
    【poj3225】Help with Intervals
  • 原文地址:https://www.cnblogs.com/sherryweb/p/13209199.html
Copyright © 2011-2022 走看看