zoukankan      html  css  js  c++  java
  • CSS-三角形及其原理

    CSS中三角形在网页中比较常见,以前是图片,不过现在基本上都是通过CSS可以完成,实现比较简单,我们可以看一组简单的三角形效果:

    其实实现起来比较简单,通过空div然后设置宽高为0,之后可以四周border的宽度,控制三角形的形状,四个border可以看成是两横横竖的木头的重叠的效果,两横在两竖上面,三角形就是中间重叠的部分切分出来的,样式的代码如下:

        .triangle {
             0;
            height: 0;
            border-top: 20px solid #EEB422;
            border-right: 20px solid #C0FF3E;
            border-bottom: 20px solid #A020F0;
            border-left: 20px solid #7CFC00;
        }
        
        .triangle-up {
             0;
            height: 0;
            border-right: 20px solid transparent;
            border-bottom: 40px solid #A020F0;
            border-left: 20px solid transparent;
        }
        
        .triangle-down {
             0;
            height: 0;
            border-top: 40px solid #EEB422;
            border-right: 20px solid transparent;
            border-left: 20px solid transparent;
        }
        
        .triangle-left {
             0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 40px solid #7CFC00;
        }
        
        .triangle-right {
             0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 40px solid #C0FF3E;
        }
        
        .triangle-left-bottom {
             0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid #7CFC00;
        }
        
        .triangle-right-bottom {
             0;
            height: 0;
            border-top: 40px solid transparent;
            border-right: 40px solid #C0FF3E;
        }
    

    具体的html页面代码:

        <div class="row">
            <span>四个三角</span>
            <div class="triangle">
            </div>
        </div>
        <div class="row">
            <span>上三角</span>
            <div class="triangle-up">
            </div>
        </div>
        <div class="row">
            <span>下三角</span>
            <div class="triangle-down">
            </div>
        </div>
        <div class="row">
            <span>左三角</span>
            <div class="triangle-left">
            </div>
        </div>
        <div class="row">
            <span>右三角</span>
            <div class="triangle-right">
            </div>
        </div>
        <div class="row">
            <span>左下角</span>
            <div class="triangle-left-bottom">
            </div>
        </div>
        <div class="row">
            <span>右下角</span>
            <div class="triangle-right-bottom">
            </div>
        </div>
        <p>博客园-FlyElephant:http://www.cnblogs.com/xiaofeixiang/</p>
  • 相关阅读:
    http协议(二、报文格式)
    http协议(一、基础部分)
    echarts双轴轴线不对齐的解决办法
    svn 强制解锁的解决办法
    分析器错误
    JQgrid for asp.net
    养生宝典,值得一读(健康养生)
    ORM框架是什么
    WebSite和WebApplication的区别
    MVC3和MVC4相关问题
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5022570.html
Copyright © 2011-2022 走看看