Fe-interview: [css] 第33天 用CSS绘制一个三角形

[haizhilin2013]

第33天 用CSS绘制一个三角形

[git710]

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

[cleverboy32]

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

[xiangshuo1992]

.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 还可以简单点
css .triangle:after{ content: ''; border: 35px solid transparent; border-bottom-color: lightgreen; }

[tzjoke]

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

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

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

[xiangshuo1992]

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

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

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

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

[Konata9]

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

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

[Vi-jay]

等分原理

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

[censek]

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

[abueavan]

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

[Lstmxx]

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

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

[blueRoach]

  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;

[MrZ2019]

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