css实现三角形

<div class="triangle">
	<div class="triangle1"></div>
	<div class="triangle2"></div>
	<div class="triangle3"></div>
	<div class="triangle4"></div>
	<div class="triangle5"></div>
	<div class="triangle6"></div>
	<div class="triangle7"></div>
	<div class="triangle8"></div>
</div>

<style>
.triangle{
    display: flex;
}
.triangle div{
    margin-right: 50px;
    width: 0;
    height: 0;
}
.triangle1{
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}
.triangle2{
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid red;
}
.triangle3{
    border-top: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;
}
.triangle4{
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
}
.triangle5{
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle6{
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}
.triangle7{
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle8{
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
</style>