边框三角形的实现

实用小知识:边框三角形

这里利用了这个知识点:同一个元素中,相邻的两个边框交接处是斜角。

因此,如果我们需要在页面中实现一个三角形,可以通过设置边框来实现:

实现思路:

1.元素的宽高必须为0;

2.宽度随意;

3.边框样式为实心;

4.重点来了:三条边的颜色为transparent,即透明的,一条边框为你要的三角形的颜色。

5:三角形的底边是相邻两条边的宽度相加;高是该条边的宽度。

这样就实现了一个小三角形。

如果要改变三角形的方向,就把有颜色的边改为另一边。

三角形的大小由边框的宽度控制。四条边的宽度不一致,就会出现各式各样的三角形。

只要记住上面的1/4/5知识点就可以了,大家放心大胆的敲代码试一试就更加明白如何实现边框三角形啦~

看我做出来的三角形 →_→边框三角形的实现_第1张图片

代码粘上来:

    


    

你可能感兴趣的:(边框三角形的实现)