css绘制三角形

<style>
    #triangle{
      width:0;
      height:0;
      border-width: 100px;
      border-style: solid;
      border-color: transparent blue transparent transparent;
    }
</style>

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

举个栗子

由于手机之间的兼容性问题，具体应用时更推荐直接使用图片代替css三角形

--

<div class="order-content" >
    <div class="live-timecount">距开播：{{timecount}}</div>
    <div class="triangle-body">
        <div class="timecount-triangle"></div>
        <div class="orderbtn-triangle"></div>
    </div>
    <div class="live-orderbtn">
        。。。
    </div>

.order-content{
    .live-timecount{
        。。。                             
    }
    .triangle-body{
        width: 40px;
        display: flex;
        align-items: flex-end;
        .timecount-triangle{
            width:0;
            height:0;
            border-width: 15px;
            border-style: solid;
            border-color: #EABD1F transparent transparent #EABD1F;
        }
        .orderbtn-triangle{
            margin-left: -30px;
            width:0;
            height:0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent #0ECD7A #0ECD7A transparent;
        }
    }
    .live-orderbtn{
        。。。                          
    }
}