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

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了)

    之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。

    看了下源码是这样的:

    .caret {
    display: inline-block;
     0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    }

     研究一番之后,发现原理是这样的:

    首先,需要把元素的宽度、高度设为0。

    然后设置边框样式。最关键的也在这里。

    这里我们先做一个实验,如果一个元素具有下列样式:

    {
     0;
    height: 0;
    border: 4px solid;
    }

     效果是什么?没错是个正方形:

    因为元素宽度、高度都为0,只有4px的边框,于是变成了上面的效果。

    再来,我们把样式改成下面这样:

    {
     0;
    height: 0;
    border-top: 40px solid #000;
    border-right: 40px solid #ff0000;
    border-left: 40px solid #ff0000;
    border-bottom: 40px solid #000;
    }

     这会是什么效果呢?可能你不会想到:

    这是为什么呢?我们打个比方,有四块红色和黑色的木板代表元素的四个边框,把他们两横两竖重叠起来,这时候他们在二维平面的投影便成了上面的效果。

    说到这里,大家该明白了上面的三角形图标是怎么来的了吧:元素没有下边框,而左右边框又是透明的,相当于只有上图中的上面的黑色三角形部分。

    所以,如果我们要做倒立三角形、向右的、或者向左的三角形,只需要为三角形底部设置边框,两腰边框透明即可。

    例如:

    {
     0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid #ff0000;
    border-bottom: 40px solid transparent;
    }

     

    另外,如果我们把样式改成这样:

    {
     0;
    height: 0;
    border-top: 40px solid #000;
    border-right: 30px solid #ff0000;
    border-left: 50px solid #ff0000;
    border-bottom: 25px solid #000;
    }

     将得到如下效果:

  • 相关阅读:
    想不赚钱都难的7大行业
    [转帖]一位年轻商人的经验感悟
    对待下级十二条准则
    让自己幸福的10条秘诀
    孤独感
    “3+3”看华为云FusionInsight如何引领“数据新基建”持续发展
    【乘风破浪的开发者】丁一超:从AI实战营出发探索未知的AI世界
    适用初学者的5种Python数据输入技术
    遥感影像处理有高招,“专治”各类花式并发的述求!
    从“小众”到“首选”,推动云原生产业落地华为云作用几何?
  • 原文地址:https://www.cnblogs.com/0621-barvo/p/4878809.html
Copyright © 2011-2022 走看看