盒子模型由外边距、边框、内边距、内容，四部分组成，边框 border 本身就是一个梯形，下底由你设置的 border-width 决定，上底由盒子的内容来决定。

  当我们将内容设置为0的时候，这时候边框就是充满盒子，并且每个边框都是一个三角形。我们想要的三角形就得到了，此时只需要设置相应边框为透明色，将其在视觉上隐藏起来，就可以得到我们需要的特定方向的三角形了。

这时候我们只需要隐藏三个边框的颜色就可以得到想要的三角形了，注意隐藏是边框颜色，不是设置宽度为0。 

.box {             width: 0;             height: 0;             /* 考虑一些低版本浏览器的兼容性问题 */             line-height: 0;             font-size: 0;             /* 先给四个边框设置颜色为透明色，需要哪个方向的边框，再单独设置哪个边框的颜色即可 */             border: 50px solid transparent;             /* 朝右的三角形 */             border-left-color: gray;              }

   其余方向的三角形也是同理的。

 使用定位和CSS三角就可以制作网站上常见的样式

 首先我们可以准备一个盒子 div，里面放一个 span 用作制作三角形，通过使用子绝父相，就可以实现类似的样式。废话不多说，直接上代码：

最终，我们就可以得到下面的效果图：

        以上就是自己的理解，欢迎指正。下面将全部代码奉上，直接复制下来新建一个.html文件就可以使用啦。