css transform制作三角图形

以前做项目的时候，会遇到导航尖角的情况，那时候用的方法就是利用border的四个边的长度做出来的，今天发现一个不一样的方法transform；

首先创建html

 <div class="box">
        <div class="sanjiao">
        </div>
    </div>

然后编写css样式

        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:2px solid #000000;
            position: relative;
            margin:40px auto;

        }
        .sanjiao{
            position: absolute;
            top:20px;
            right:-9px;
            width: 14px;
            height: 14px;
            background: #ffffff;
            transform: rotate(45deg);
            border:1px solid #000000;
            border-left:0;
            border-bottom:0;
        }

当把类名为.sanjiao的背景色来回切换显示隐藏的时候，也是可以制作成三角形。不过用的是父集的边框，
这个测试的原理，主要是运用了transform的旋转属性，将正方形旋转制作成想要的三角形，之前都是利用四个边框进行三角形的制作。