CSS实现三角形

时间：2022-02-23 16:47:17

突然想起搞一把三角形。

简单来说：

建一个div  宽度、高度设为0

添加两个样式：

border 和 border-color

如果需要一个三角形把其他边框都设为透明 transparent

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>CSS实现三角形</title>

     <style media="screen">

       .triangle{

         width:0;

         height:0;

         border:50px solid white;

         border-color：red transparent transparent transparent;

       }

     </style>

   </head>

   <body>

     <div class="triangle"></div>

   </body>

 </html>

相关文章