css设置倒三角形

效果：

 

 

 

heml：

<div class="index_top_in_box">

                <!-- 背景 -->

                <div class="index_top_in_box_bg"></div>

</div>

 

 

 

css:

.index_top_in_box {

    display: flex;

    flex-direction: column;

    flex: 1;

    margin: 20px;

    border-radius: 10px;

    position: relative;

}

.index_top_in_box_bg {

    position: absolute;

    background: #fff;

    border-radius: 10px;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

.index_top_in_box_bg::before {

    content: "";

    width: 0;

    height: 0;

    border-left: 14px solid transparent;

    border-right: 14px solid transparent;

    border-top: 20px solid #fff;

    position: absolute;

    bottom: -20px;

    left: 60px;

}