如何用css写一个带边框的三角形，框框的上面三角形

相信很多人都想知道如何写一个带边框的三角形，用在各种带三角形的边框上，

这是我自己写的一个带边框的三角形

以下是代码，各位可以自己借鉴。

body{ background-color: bisque; } .box1{ width: 500px; height: 200px; border: 1px solid black; margin: 100px auto; background-color: #fff; position: relative; } .box1::before{ width: 0; height: 0; content: ""; border-width: 10px; border-color: transparent transparent #fff transparent; border-style: dashed dashed solid dashed; position: absolute; top: -20px; right: 10px; z-index: 100; } .box1::after{ width: 0; height: 0; content: ""; border-width: 11px; border-color: transparent transparent black transparent; border-style: dashed dashed solid dashed; position: absolute; top: -22px; right: 9px; z-index: 99; }

<div class="box1"></div>

———————————————— 版权声明：本文为CSDN博主「wurao_l」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/wurao_l/article/details/123029691