CSS画三角形

csstpeixun 2018-01-12

       最近做一个打气球小游戏,原理是原生JS操作DOM节点,最基础的页面样式涉及到css画三角形,有许多同学不太懂,所以这里系统总结下。

       我这里就用讲解下分解动作

       首先,是大家比较熟悉的带有边框的矩形

.border {  
  width:50px;  
  height:50px;  
  border: 2px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}

     CSS画三角形

    当我们增大border的值,

.border {  
  width:50px;  
  height:50px;  
  border: 20px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}

    CSS画三角形

     从上图可以很明显的发现每一边的边框是梯形

    

    现在试想一下,我们把元素的长和宽都设置为0px,边框的值不变,我们用极限的原理解释,每一边的边框将会由梯形变成三角形,下面我们用代码来试验一下。

.border {  
  width:0px;  
  height:0px;  
  border: 20px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
}

     我们得到如下结果:

   CSS画三角形

     那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。比如

.border {  
  width:0px;  
  height:0px;  
  border: 20px solid;  
  border-color: #ADFF2F transparent transparent transparent;  
}

  CSS画三角形

    我们再回过头来看Bootstrap中.caret的源码。似乎和我们想象中的不一样,在设计向下三角形时,开发者只设置了左上右的边框值,然后将左右两边的边框的border-color设置为transparent。我们现在先把左右两边的border-color不设置为transparent,看看是怎么样的图形。

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
  border-left: 40px solid #FF0000;  
}

 CSS画三角形

      原来当不设置下边框时,左右的边框会把下半部分切掉。到这里我们应该能完全理解bootstrap的.caret代码的原理了。

    但是我们的探索并没有到此就结束,我们带着好奇心,测试如下代码:

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
}

     我们只设置上右的边框,得到如下结果:

CSS画三角形

   似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。

.border {  
  width: 40px;   
  height:40px;  
  border-top: 40px solid #ADFF2F;  
  border-right: 40px solid #BA55D3;  
}

    CSS画三角形

   原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。

   最有我们来看看,如果只设置元素对边的两条边框,看看会出现什么情况。

.border {  
  width: 0;   
  height:0;  
  border-top: 40px solid #ADFF2F;  
  border-bottom: 40px solid #FF0000;  
}

    浏览器什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.

  

 【常用场景】:提示框三角形(有边缘的)

如图:CSS画三角形

原理:先画一个三角形,再画白色三角形的,调整几像素位置,覆盖掉一边

–> CSS画三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css三角形</title>
    <style type="text/css">
        .triangle{
            margin: auto;
            margin-top: 50px;
            width: 200px;
            height: 100px;
            border: 1px solid green;
            position: relative;
        }
        .triangle:after{
            content: '';
            position: absolute;
            top: -20px;
            right: 10px;
            border: 10px solid transparent;
            border-bottom: 10px solid white;
            z-index: 20;
        }
        .triangle:before{
            content: '';
            position: absolute;
            top: -21px;
            right: 10px;
            border: 10px solid transparent;
            border-bottom: 10px solid green;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

.

     

相关推荐

startXUEBA / 0评论 2016-05-30