/* 正方形 */
.square{
    width: 200px;
    height: 100px;
    background: red;
}
/* 长方形 */
.rectangle{
    width: 200px;
    height: 50px;
    background: red;
}
/* 圆 */
.circular{
    width:100px;
    height:100px;
    background:red;
    border-radius:50%; /* 水平、垂直半径为宽高的50% */
}
/* 椭圆 */
.ellipse{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px / 50px;  /* 表示以水平半径100px 垂直半径50px的椭圆切割 */
}
/* 三角形上 */
.triangle-top{
    width: 0;
    height: 0;
    /* border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red; */
    border: 50px solid;
    border-color: transparent transparent red transparent;
}
/* 三角形下 */
.triangle-bottom{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
/* 三角箭头左 */
.arrow_left{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent red transparent transparent;
    position: relative;
  }
  .arrow_left::after{
    content: '';
    position: absolute;
    right: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent white transparent transparent;
  }
/* 三角箭头右 */
.arrow_right{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent transparent transparent red ;
    position: relative;
}
.arrow_right::after{
    content: '';
    position: absolute;
    left: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent transparent transparent  white ;
}
/* 三角形左上:其他方向同理，修改border-xx 即可*/
.triangle{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
/* 右上斜角 */
.bevel-angle {
    position: relative;;
}
.bevel-angle::after{
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: calc(100% - 50px);
    height: 50px;
    background-color: #44c6a4;
}
.bevel-angle::before{
    content: "";
    position: absolute;
    left: calc(100% - 50px);
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #44c6a4;
    border-right: 50px solid transparent;
}