zoukankan      html  css  js  c++  java
  • 通过CSS实现各种方向的三角形

    #triangle-up {
         0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    
    
    
    #triangle-down {
         0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    
    
    
    #triangle-left {
         0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    
    
    #triangle-right {
         0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    
    
    #triangle-topleft {
         0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    
    
    #triangle-topright {
         0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent; 
    }
    
    
    
    #triangle-bottomleft {
         0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    
    
    
    #triangle-bottomright {
         0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }
    请把你的疑问评论在下方。
  • 相关阅读:
    git配置公钥,私钥
    vscode之vue文件代码格式化代码无效解决办法
    [python 并行3]进程
    [spring 并行6]分布式
    [spring 并行5]GPU
    [python 并行2]线程
    [spring 并行4]异步
    [python 并行1]简介
    [flask] flask api + vue 跨域问题
    [spring学习4] MVC
  • 原文地址:https://www.cnblogs.com/zzcit/p/5586434.html
Copyright © 2011-2022 走看看