CSS三角形和常见图形

三角形

利用border实现三角形是最常见的方法，这里我们设置一个盒子，把宽高设置为零，边框给100px值，并各自给一个颜色以便观察。可以看到由于没有宽高，边框会沿交叉轴两侧铺垫

        .box {
            width: 0;
            height: 0;         
            border-top: 100px solid #ec9bad;
            border-right: 100px solid #ce5777;
            border-bottom: 100px solid #ed556a;
            border-left: 100px solid #de1c31;
        }

这时我们只需要留下一个边框颜色，其他边框设置成transparent透明属性就可以得到一个三角形

 .box {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid #de1c31;
        }

想要设置三角形指向只需要留下对应方向边框颜色，其他边框色设置成透明色即可

如果想设置不同角度的三角形只需要设置各边框值的比例，等边三角形可以设置一边为0，其他三边约等于7：7：12

     .box {
            width: 0;
            height: 0;
            border-right: 70px solid transparent;
            border-bottom: 120px solid #ed556a;
            border-left: 70px solid transparent;
        }

扇形

扇形的实现思路基本和三角形一致，只需要给盒子添加border-radius：50%，使其变成圆形，然后挖三填一（不是）

     .box {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid #ed556a;
            border-left: 50px solid transparent;
            border-radius: 50%;
        }

椭圆

椭圆的实现是基于border-radius属性和长方形盒子实现的，我们平常使用border-radius属性只设置单一值，但其实可以设置水平半径和垂直半径两个值border-radius: 水平半径 / 垂直半径;

       .box {
            width: 100px;
            height: 50px;
            background-color:#ed556a ;
            border-radius: 50% / 50%;
        }

给任意宽高的长方形盒子设置水平方向50%的圆角和垂直方向50%的圆角就可以得到一个椭圆

梯形

从前面的例子可以看出各边框是沿两条交叉轴所形成的四个区域绘制的，盒子的内容越小，边框的底部也越小，绘制矩形只需要拉大盒子的内容，使边框底部由点形成一条边即可绘制出梯形

     .box {
            width: 40px;
            height: 40px;
            border-top: 50px solid #ec9bad;
            border-right: 50px solid #ce5777;
            border-bottom: 50px solid #ed556a;
            border-left: 50px solid #de1c31;
        }

盒子宽高越大梯形上边越宽，这时只需要和三角形一样留一藏三就可以得到一个梯形

     .box {
            width: 40px;
            height: 40px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid #ed556a;
            border-left: 50px solid transparent;
        }

补充:css绘制0.5px直线

0.5px线也是前些年面试的高频考题，实现思路是利用transform的缩放属性

定义一个宽任意高为1px的盒子

         .box  {
            width: 100px;
            height: 1;
            background-color: black;
        }

再给盒子添加 transform: scaleY(0.5)，使盒子沿垂直方向缩放0.5倍

   .box  {
            width: 100px;
            height: 1px;
            background-color: black;
            transform: scaleY(0.5);
        }

我们可以看到盒子的高变成了0.5px

前端新人，写博客是为巩固知识，希望大家多多支持，也欢迎大家补充指正交流！