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;
}
 
 
posted @ 2022-06-10 10:40  宅女二二  阅读(147)  评论(0编辑  收藏  举报