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;
}