CSS实现各种三角形图案

CSS实现各种三角形

css构造三角形问题实际上就是给一个盒子设置上下左右的边框,然后这个盒子宽高都为0,想要实现什么样的三角形就给对应拼凑出来的边框颜色设置为透明就好了,先来看一个普通的宽高10px的div加上下左右边框的效果

只需要把中间的宽高10px给设置为0,就变成了右边图片的样子

css代码:

.box{
      width: 0px;
      border-top: 100px solid red;
      border-right:100px solid palegoldenrod;
      border-left: 100px solid lavender;
      border-bottom: 100px solid lawngreen;
}

再来看这个三角形

想要实现如图所示的三角形,先构造一下要使用什么边框,如图的三角形使用到了上左右边框,而只需要把左右的边框设置成透明,div的宽高都为0,这样实现三角形就完成了.

css代码:

.box{
         width: 0px;
         border-top: 100px solid red;
         border-right:100px solid transparent;
         border-left: 100px solid transparent;
}

 .box3{
            width: 0;
            border-left: 200px solid transparent;
            border-top: 100px solid pink;
            border-bottom:50px solid transparent;
        }

 .box2{
            width: 0;
            border-left: 200px solid pink;
            border-top: 100px solid transparent;
            border-bottom:50px solid transparent;
        }

实现各种三角形问题,只需要考虑一下对应参与边框和需要透明的边框