css中border画三角形

时间:2022-10-14 21:45:44

<!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>