css三角形窄一点和宽一点

CSS三角形是Web开发中非常常见的一个元素，可以用来作为箭头、标签、图标等等，下面我们来学习如何制作不同大小的CSS三角形。

首先，我们需要了解CSS三角形的本质是一个由四个等边三角形构成的正方形，如下所示：

 ____  
     /    
    /  \___
   //   /
  /    \_/  
          /
   \______/ 

从上图可以看出，在一个正方形中，三角形的尺寸主要由它的高度（也就是短边）确定。当我们需要制作一个窄一点的三角形时，只需要把短边调小即可。

/* 窄一点的三角形 */
.triangle-narrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #333;
} 

上面的代码中，我们设置了一个宽度为0的容器，然后设置了三条边的样式，其中左边的边框作为三角形的短边，宽度为30px，其他两条边的宽度为0，高度为20px，作为三角形的两个等腰边。

如果要制作一个宽一点的三角形，我们只需要把短边的长度调大即可，代码如下：

/* 宽一点的三角形 */
.triangle-wide {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 80px solid #333;
} 

上面的代码中，我们将短边的长度调整为80px，等腰边的高度为60px。

通过上面的两个例子，相信大家已经掌握了如何制作不同大小的CSS三角形了，可以按照这个思路调整大小和颜色，来满足自己的需求。总结一下，CSS三角形的关键在于使用边框来构造图形，通过调整边框粗细和高度来控制三角形的大小。