通过border属性控制箭头的朝向
直接将边框颜色改为透明色,通过控制边框的长度 来控制三角形的形状
<body>
<div class="triangle"></div>
</body>
<style>
.triangle{
width: 0;
height: 0;
border-radius: 10px;
border-top: 0px solid transparent ;
border-right: 100px solid transparent ;
border-bottom: 200px solid #F56C6C ;
border-left: 100px solid transparent ;
}
</style>
<style>
.triangle{
width: 0;
height: 0;
border-radius: 10px;
border-top: 190px solid #F56C6C ;
border-right: 100px solid transparent ;
border-bottom: 10px solid transparent;
border-left: 100px solid transparent ;
}
</style>