css中border画三角形

最新推荐文章于 2025-03-24 00:59:30 发布

转载最新推荐文章于 2025-03-24 00:59:30 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/VaeVae/p/8630686.html

本文介绍如何使用CSS的border属性来绘制不同方向的等腰三角形。通过调整border的宽度和颜色，可以轻松实现上、下、左、右及左下、右下等不同朝向的三角形绘制。

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS中border画三角形</title>
   <style>
   /*
   等腰三角形
       .sanjiaoxing{
           width:0;
           height:0;
           border-bottom:100px solid yellow;
           border-left:50px solid transparent;
           border-right:50px solid transparent;

       }
   倒等腰三角形
       .sanjiaoxing{
           width:0;
           height:0;
           border-top:100px solid yellow;
           border-left:50px solid transparent;
           border-right:50px solid transparent;

       }
   右为底等腰三角形
       .sanjiaoxing{
           width:0;
           height:0;
           border-right:100px solid yellow;
           border-bottom:50px solid transparent;
           border-top:50px solid transparent;
       }
   左为底等腰三角形
       .sanjiaoxing{
           width:0;
           height:0;
           border-left:100px solid yellow;
           border-top:50px solid transparent;
           border-bottom:50px solid transparent;
       }
   左下为底等腰三角形
       .sanjiaoxing{
                   width:0;
                   height:0;
                   border-left:100px solid yellow;
                   border-top:100px solid transparent;
               }
       .sanjiaoxing{
                    width:0;
                   height:0;
                   border-right:100px solid transparent;
                   border-bottom:100px solid yellow;
                       }
   右下为底等腰三角形
       .sanjiaoxing{
                           width:0;
                           height:0;
                           border-right:100px solid yellow;
                           border-top:100px solid transparent;
                       }
       .sanjiaoxing{
                           width:0;
                           height:0;
                           border-bottom:100px solid yellow;
                           border-left:100px solid transparent;
                       }
       */

   </style>
</head>
<body>
<div>
   <div class='sanjiaoxing'>
   </div>
</div>
</body>
</html>