zoukankan      html  css  js  c++  java
  • CSS实现DIV三角形

    本文内容收集来自网络

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

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

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

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

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

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

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

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

    <!-- 外框 -->
    <div class="mod-container">
        <!-- 小三角部分 -->
        <div class="mod-triangle">
            <div class="t-border"></div>
            <div class="t-inset"></div>
        </div>
    </div>
    /*外框容器*/
    .mod-container {
        width:100px;
        height:60px;
        border:1px solid #000;
        margin:20px;
        background:#fff;
    }
    /*小三角部分*/
    .mod-triangle {
        display:block;
        position:relative;
        left:-23px;
        top:18px;
        z-index:20;
    }
    .mod-triangle .t-border,
    .mod-triangle .t-inset{
        left:0px;
        top:0px;
        width:0;
        height:0;
        font-size:0;
        overflow:hidden;
        position:absolute;
        border-width:12px;
        /*可在此处更改小三角方向:上-右-下-左(solid的位置)*/
        border-style:dashed solid dashed dashed;
    }
    /*小三角的边框,如果不需要,可将颜色值改变*/
    .mod-triangle .t-border{
        border-color:transparent #000 transparent transparent;
        left:-1px;
    }
    .mod-triangle .t-inset{
        border-color: transparent #fff transparent transparent;
    }
  • 相关阅读:
    python 教程 第十七章、 网络编程
    SecureCRT循环检查设备状态
    《让僵冷的翅膀飞起来》系列之一——从实例谈OOP、工厂模式和重构
    设计,看上去很美!——“Design & Pattern”团队的第一块砖
    杂拌儿
    换了个计数器
    在Remoting客户端激活方式采用替换类以分离接口与实现
    动动手脚,protected不再被保护
    博客园出现在MSDN中国的首页链接
    近期写作计划和读书安排
  • 原文地址:https://www.cnblogs.com/showersun/p/4002276.html
Copyright © 2011-2022 走看看