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

    实现过程:

    正常的border

    <div class="box"></div>
    .box {
         background: #ddd;
          100px;
         height: 100px;
         border-top: 20px solid yellow;
         border-right: 20px solid red;
         border-bottom: 20px solid black;
         border-left: 20px solid blue;
    }

    高度和宽度减小后的border

    正常border表现为梯形,当box的高度和宽度减小至0时,border则为三角形

    .box {
            background: #ddd;
             0;
            border-top: 20px solid yellow;
            border-right: 20px solid red;
            border-bottom: 20px solid black;
            border-left: 20px solid blue;
    }

    接下通过设置其他三个border的背景为透明则可以实现三角形

    .box {
             0;
            border-top: 20px solid yellow;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
    }

    .box {
             0;
            border-top: 20px solid transparent;
            border-right: 20px solid red;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
    }

    .box {
             0;
            border-top: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid black;
            border-left: 20px solid transparent;
    }

    .box {
             0;
            border-top: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid blue;
    }

    参考:https://www.cnblogs.com/youhong/p/6530575.html

  • 相关阅读:
    quick-cocos2dx 3.5集成protobuf
    lua和luajit在cocos2dx mac模拟器的简单测试
    cocos2dx-lua手游客户端框架设计
    cocos2dx动画技术选型
    lua中的面向对象
    html 学习
    OC 与js 互相调用
    Carthage的安装和使用
    Bomb后端云使用
    FMDB简单使用
  • 原文地址:https://www.cnblogs.com/bear-blogs/p/10261917.html
Copyright © 2011-2022 走看看