.triangle{
    width: 0;
    border-bottom: 35px solid lightgreen;
    border-left: 35px solid transparent;
}

wrong

.triangle{
     width: 0;
     border: 35px solid transparent;
     border-bottom: 35px solid lightgreen;
}

.triangle{
    width: 0;
    border-bottom: 35px solid lightgreen;
    border-left: 35px solid transparent;
}

wrong

.triangle{
     width: 0;
     border: 35px solid transparent;
     border-bottom: 35px solid lightgreen;
}

一般会用伪元素来实现这种装饰性的效果，content 为空，就不需要 width 了，最后 border 还可以简单点

.triangle:after{
    content: '';
    border: 35px solid transparent;
    border-bottom-color: lightgreen;
}

↖️ 楼上说的很对，比如我头像旁就有一个三角形应该是个 :before 伪类，一般会配合绝对定位

三角形的原理就是一个盒子有四个边框交界处都是45度角，当盒子宽高都为0是，最后其实就是一个由4个三角形形成的正方形，给 border-color 设置透明，然后给其中一个设置颜色就是一个三角形了

边上那个三角形就是给 border-right 设置颜色了

↖️ 楼上说的很对，比如我头像旁就有一个三角形应该是个 :before 伪类，一般会配合绝对定位

三角形的原理就是一个盒子有四个边框交界处都是45度角，当盒子宽高都为0是，最后其实就是一个由4个三角形形成的正方形，给 border-color 设置透明，然后给其中一个设置颜色就是一个三角形了

边上那个三角形就是给 border-right 设置颜色了

给 border-width 设置两个不同的值，可以达到不同角度三角形的效果，比如 border-width: 10px 20px; 这个时候，4个三角形合成的就是一个长方形了，他们的角度是，上下两个三角是钝角，左右两个是锐角，所以不一定是4个正三角形合成一个正方形，任何我们想要的角度原则上都可以做到。

看了楼上老哥们的解释感觉太神奇了，在 codepen 上试了一下感觉对盒模型有了个新的认识。

https://codepen.io/Konata9/pen/WqPxML

等分原理

  .arrow {
    border: 20px solid transparent;
    border-bottom-color:#00aeff ;
    display: inline-block;
  }

#17 第6天 用css创建一个三角形，并简述原理

整了一个空心三角形，效果

<div class='rect'></div>

.rect {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  &::before{
    position: absolute;
    content: '';
    bottom: 7px;
    left: 20px;
    border: 80px solid transparent;
    border-bottom-color: white;
    z-index: 2;
   }
  &::after{
    position: absolute;
    content: '';
    bottom: 0px;
    border: 100px solid transparent;
    border-bottom-color: rgb(34, 230, 220);
    z-index: 1;
  }
}

.triangle{
width: 0;
border-bottom: 35px solid lightgreen;
border-left: 35px solid transparent;
}

.triangle {
width: 0;
height: 0;
border-left: 69px solid transparent;
border-right: 69px solid transparent;
border-bottom: 120px solid skyblue;
}

https://codepen.io/ShiinaRay/pen/bGmEBVg