css创建三角形及原理

{

    width: 0;

    height: 0;

    boeder-top: 40px solid transparent;

    boeder-left: 40px solid #ff0000;

    boeder-right: 40px solid transparent;

    boeder-bottom: 40px solid transparent;

}

{

    width: 0;

    height: 0;

    boeder-top: 40px solid #000;

    boeder-left: 40px solid #ff0000;

    boeder-right: 40px solid #ff0000;

    boeder-bottom: 40px solid #000;

}

通过以上代码对比，我们可以知道，由于这个元素没有宽高，只有边框的线的宽度，所以会出现以上效果，每个三角形都是这个元素的边。而transparent意为透明的，所以说，我们想要哪一块三角形，只要把其他的三条边设置为透明即可。