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

  • 相关阅读:
    感知器及其Python实现
    机器学习中的偏差和方差
    tensorflow构建CNN模型时的常用接口函数
    在O(1)时间复杂度删除链表节点
    python实现剑指offer删除链表中重复的节点
    yii2 advanced版基础部分
    Yii2 baisic版gii的使用和分页
    Yii2 表单(form)
    yii2 basic版 MVC 部分
    yii2 basic版基础部分
  • 原文地址:https://www.cnblogs.com/bear-blogs/p/10261917.html
Copyright © 2011-2022 走看看