用CSS做的一个带边框的小三角（form 水门 a big lovely boy）

本文介绍了一种使用CSS创建带有边框的小三角形的方法，通过巧妙地利用伪元素及边框样式实现不同颜色的叠加效果，从而在网页布局中轻松添加装饰性的三角形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天很开心因为解决了自己N久需要却没有得到解决的问题就是这个带边框的小三角。O(∩_∩)O哈哈~

贴一下自己做的一个小demo的源代码(这里只给出了指向是朝上的例子，其他类似)：

<!doctype html> <html> <head> <meta charset="gbk"> <title>First triangel with border Demo</title> <style> body,button,input,select,textarea{ font:12px/1.5 '微软雅黑',Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/ } div{ position: absolute; margin-top: 20px; border: 1px solid #999999; background-color: #FFFFFF; width: 100px; height: 100px; } i, s{ width: 0px; height: 0px; font-size: 0px; line-height: 0; overflow: hidden; border-width: 6px; /*for i change at s*/ position: absolute; border-color:transparent transparent #999 transparent; border-style:dashed dashed solid dashed; left:14px; top:-12px; z-index: 30px; } s{ border-width: 5px; border-bottom-color: #FFFFFF; left: 15px; top: -10px; z-index: 40px; } </style> </head> <body> <div> <i></i> <s></s> </div> </body> </html>

perfect！ I like it very very much...