css 等边三角形和直角三角形

315 阅读1分钟

看到一篇文章介绍css画三角形 有个等角三角形的 人家应该是算错了

等边三角形

下面的数值约分一下 top 2 left和right 1.41就是√2(根号2) 勾股定理


 
div{
    width: 0;
    height: 0;
    border-top: 20px solid red;
    /* 通过改变 border-left 和 border-right 中的像素值,来改变三角形的形状 */
    border-left: 14.1px solid transparent;
    border-right: 14.1px solid transparent;
}
 

image.png

直角三角形



div{
   width: 0;
   height: 0;
   border:20px solid transparent;
   border-bottom: 20px solid red;
}

image.png