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;

}