2023-11-02

CSS三角的制作

法一：如果设一个宽高均为0的盒子，对其边框进行操作会发现正好是由4个三角形组成，如果想要其中某个方向的三角形，仅需将所有盒子的边框设置为透明色，留下所需的边框。不过值得注意的是   要上三角：改变下边框颜色； 要下三角：改变上边框颜色； 要左三角：改变右边框颜色；  要右三角：改变左边框颜色。也就是说，要上设下，要下设上，要左设右，要右设左，一身反骨。

                                                        

            1、先创建一个盒子（这里是box1）

            

             2、在CSS样式中将盒子的宽高设为0（记得这是在css中或者是在style里进行操作的）

                                                           

            3、将盒子所有和边框设为透明色，将所需边框改变颜色形成三角形，比如：

                        上三角：改变下边框颜色

                        下三角：改变上边框颜色

                        左三角：改变右边框颜色

                        右三角：改变左边框颜色

                                                            

        运行结果图：

法二：利用定位、旋转制作

            1、 准备一个正方形盒子（必须是正方形，不然三角的边边不一样长）

                            

            2、书写盒子属性（记得这是在css中或者是在style里进行操作的）

                                                                

            3、利用定位、旋转及伪元素（本身无大小）

                              （使用伪元素就可以少设置一个盒子）  

                                                    

        4、运行效果：