如何通过代码做出自己想要的三角形或者梯形

标题

1.box-sizing:border-box
2.border-left/right/top/bottom
3.透明的颜色（transparent）

如下图：

<style>
 body{
            position: relative;
          width: 100%;
          height: 900px;
        }
        div{
            position:absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 30px;
            //核心代码
            box-sizing: border-box;
            border-bottom:30px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
        }
        </style>