如何制作三角形div？

我想使div像三角形一样。我用吹牛的图像来描述清楚我的问题。

我的代码是：

<div class="rest_pack">
                        <img width="100%" src="<?= Yii::$app->request->baseUrl . '/files/upload/3.png' ?>">
                        <div class="row side_info">
                            <div class="top">
                                ساندویچ مخصوص
                            </div>
                            <div class="bottom">
                                5,500 
                                تومان
                            </div>
                        </div>
                    </div>

CSS：

.rest_pack .side_info{
    position: absolute;
    width: 100%;
    background-color: #FFF;
    top: 100px;
    opacity: 0.8;

}
.rest_pack .side_info .top{
    text-align: center;
    font-weight: bold;
    font-size: 17px;
    color: #3131AA;
    padding-top:5px;
}
.rest_pack .side_info .bottom{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #F63440;
    padding-top:5px;
}

结果是：

但是我想要这样的东西。我要制作红色DIV。