div怎么在底部設計一個倒三角形

<style>

#triangle-down {

     width: 0;

     height: 0;

     border-left: 50px solid transparent;

     border-right: 50px solid transparent;

     border-top: 100px solid red;

}

</ style >

< div  id = "triangle-down" ></ div >

 

 

或

 

.triangle {

     display : inline- block ;

     width :  0 ;

     height :  0 ;

     line-height :  0 ;

     border :  20px  solid  transparent ;

     border-top-color :  #000 ;

     border-bottom-width :  0 ;

}