css如何画有边框的三角形

vue的logo就可以看作是一个有边框的三角形。

vue的logo实现css样式:

    <div>
        <div id="vue-logo">
            <div class="green">
                <div class="gray">
                    <div class="white"></div>
                </div>
            </div>
        </div>
    </div>
	<style>
	    #vue-logo{
	        width: 430px;
	        height: 430px;
	        margin: auto;
	        position:absolute;
	        left: 0;
	        right: 0;
	        top: 0;
	        bottom: 0;
	    }
	    .green{
	        width: 0;
	        height: 0;
	        border-top:350px solid #41b883;
	        border-right:200px solid transparent;
	        border-left:200px solid transparent;
	        position:absolute;
	    }
	    .gray{
	        width: 0;
	        height: 0;
	        border-top:223px solid #35495e;
	        border-right:130px solid transparent;
	        border-left:130px solid transparent;
	        position:absolute;
	        top: -350px;
	        left: -130px;
	    }
	    .white{
	        width: 0;
	        height: 0;
	        border-top:112px solid #fff;
	        border-right:65px solid transparent;
	        border-left:65px solid transparent;
	        position:absolute;
	        top: -223px;
	        left: -65px;
	    }
	</style>

三角形的实现原理：

先上一段代码：

    <div>
        <div id="sjx"></div>
    </div>
	<style>
	    #sjx{
	        width: 500px;
	        height: 500px;
	        border-top: 50px solid rgb(212, 55, 141);
	        border-bottom: 50px solid green;
	        border-left: 50px solid rgb(184, 50, 27);
	        border-right: 50px solid peru;
	    }
	</style>

效果：

一个盒模型中当内容区有宽高的时候，四条边框会显示成梯形状。

当内容区无宽高时候：

    <div>
        <div id="sjx"></div>
    </div>
	<style>
	    #sjx{
	        width: 0px;
	        height: 0px;
	        border-top: 200px solid rgb(212, 55, 141);
	        border-bottom: 200px solid green;
	        border-left: 200px solid rgb(184, 50, 27);
	        border-right: 200px solid peru;
	    }
	</style>

效果：

一个盒模型中当内容区无宽高的时候，四条边框会显示成三角形。

总结：

利用上述特性，生成想要的三角形，并把其他三条边颜色变成透明即可。

要生成有边框的三角形，可以采用两个三角形通过定位重叠到一起实现。