css实现上下左右三角形

写一个div

<div class="triangle"></div>

1.向上

在这里插入图片描述

.triangle{
    
    
	width:0;
        height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

2.向下

在这里插入图片描述

.triangle{
    
    
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:50px solid red;
}

3.向左

在这里插入图片描述

.triangle{
    
    
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}

4.向右

在这里插入图片描述

.triangle{
    
    
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid red;
}

猜你喜欢

转载自blog.csdn.net/weixin_45895806/article/details/112605153