zoukankan      html  css  js  c++  java
  • 三角形div的原理

    三角形div原理

        首先我们写一个正常的方形div样式,但是我们把它的宽度和高度都设置为零,并且边框线设置的粗一点:

    { width0px

     height0px;

    Border:20px solid red;

    }

    由于我们宽度和高度都设置成了0,所以他显示的就是一个边长为边框线宽度(20px)的正方形,如图:

     

    这时候你在div中添加任何文字、图片等等都是不会显示的,因为这个div的宽度和高度都是零,他之所以是正方形是因为他有边框宽度。

     接下来我们改变它的边框线属性:(我们不在让每一条边框线都为红色,给四条边框线设置不同的颜色)

    { width0px

     height0px;

    Border:20px solid;

    border-colored  blue  yellow  green } 效果如下;

    大家可以看到,这个正方形被均分了,所以我们制作三角形就是利用均分原理,比如我们想要黄色朝上的黄色三角形,我们只需要把上边框线、和左右边框线的颜色设置为透明就可以了,如下:

    { width0px

     height0px;

    Border:20px solid;

    Border-colortransparent  transparent  yellow  transparent

    }

     

  • 相关阅读:
    [leetCode]100.相同的树
    [leetCode]88.合并两个有序数组
    [leetCode]83.删除排序链表中的重复元素
    排序算法总结
    [leetCode]69. x 的平方根
    POJ 1151 Atlantis
    POJ 3468 A Simple Problem with Integers
    SGU 271 Book Pile
    POJ 2970 The lazy programmer
    FZU 2254 英语考试
  • 原文地址:https://www.cnblogs.com/HRZJ/p/5828797.html
Copyright © 2011-2022 走看看