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

    前言:网上最普遍的实现三角形的方法,就是通过控制border来实现,那为什么可以呢?

    原理

    我们先来看看border的表现形式。

    #box{
      100px;
      height:100px;
      background:yellow;
      border-top: 20px solid red;
      border-right:20px solid black;
      border-bottom:20px solid green;
      border-left:20px solid blue;
    }

    image

    观察上图可以发现,border表现为梯形。当减小box的宽高时,会发生如下变化:

    image

    从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边降到很小。所以想一想,当这一值降到0时,border就变成了三角形。如下图:

    image

    所以我们就可以通过将元素宽高设置为0,而通过控制border来得到想要的三角形了。

    实现

    将不需要方向的border设置为透明(transparent),就可以用来实现三角形了。比如想实现下三角形,就将border-left,border-bottom,border-right设置为transparent即可。

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

    image

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

    image

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

    image

    #box{
      100px;
      height:100px;
      border-top: 60px solid red;
      border-right:20px solid transparent;
      border-bottom:0px solid transparent;
      border-left:20px solid transparent;
    }

    image

    就不一一列举了,只要明白每个方向的border都是一个三角形,就能通过调整border的大小和颜色/透明,获得各种三角形和梯形了。

  • 相关阅读:
    新手学逆向,调试abexcm1过程
    (原创)渗透某国工业系统
    (原创)对某国的一次渗透
    汇编笔记 RETF
    汇编笔记 CALL(1)
    汇编笔记 RET
    大小写转换
    JDK下载太慢?让国内镜像帮助你
    Win7,docker安装后,创建虚拟机分配不了ip错误 err: exit status 255
    Spring事务传播实践与Spring“事务失效”
  • 原文地址:https://www.cnblogs.com/youhong/p/6530575.html
Copyright © 2011-2022 走看看