保姆级快速理解怎么用边框（：after：before）做三角形

先看一段代码以及效果图

 

 

不理解没关系，往下看

我们先做一个三角形

1.先设一个div，长宽边框 如图

 

2.加粗边框 如图

 

3.将div盒子内容宽高设为0，可以看到只剩边框，此时黑色内容就是之前设的加粗边框的宽度形成的。所以边框越粗，黑色正方形越大。 如图 

 

 4.设置边框上，左，右颜色为透明，下设置为红色 如图

 

 此时，三角形已经写出来了，可喜可贺

相信看到这里，三角形怎么来的你已经清楚了

现在再看之前的代码

content:'   '：content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好，content属性只能用来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字信息会被content替换，替换的仅仅是视觉层。
————————————————
版权声明：本文为CSDN博主「朝阳39」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41192489/article/details/115100040

简而言之就是设置一个无法读取的div，不占位置

width：0；  宽度设为0

border：8px solid white“； 设置边框宽度就是你三角形的底，宽度越大，三角形越大

border-color：设置三个方向透明，就变成三角形了，想朝哪个方向就哪个方向不设置透明设置颜色

最后用绝对定位来改变小三角的位置，就可以实现要求了。