css左右三角形

在CSS中，我们可以通过代码来创建左右三角形的形状，这种形状在很多设计中经常会用到。左右三角形可以通过设置border和transparent背景配合使用来实现。下面是三角形的代码：

/*左三角形*/
.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-right: 80px solid #ccc; 
    border-bottom: 40px solid transparent; 
}

/*右三角形*/
.triangle-right {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-left: 80px solid #ccc ; 
    border-bottom: 40px solid transparent; 
}

以上代码中，我们使用了border-top、border-right、border-bottom、border-left来分别设置三角形的边框。其中，边框颜色设置为#ccc，可以根据需要自己调整。

如果要使三角形不完全填充效果区域，可以使用transparent来设置背景色，如下：

/*左三角形*/
.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-right: 80px solid transparent; 
    border-bottom: 40px solid transparent; 
    border-left: 80px solid #ccc; 
}

/*右三角形*/
.triangle-right {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent; 
    border-right: 80px solid #ccc; 
    border-bottom: 40px solid transparent; 
    border-left: 80px solid transparent; 
}

以上代码中，我们使用了transparent来设置背景色，该设置为透明色，所以在效果区域中只显示出了三角形的边框。

在实际开发中，我们可以使用以上代码来实现左右三角形的效果，这样在很多设计场景中都会非常有用。比如在装饰、提示信息、tag标签等场景中都可以运用这种左右三角形的形状，使设计变得更加时尚、精美。