CSS组件化之实心三角形

//等腰上三角
.top-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 120px 100px;
    border-color: transparent transparent #007bff transparent;
}
//右上三角
.right-top-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 120px 120px 0;
    border-color: transparent #007bff transparent transparent;
}
//等腰右三角
.top-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 0 100px 120px;
    border-color: transparent transparent transparent #007bff;
}
//右下三角
.right-bottom-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 120px 120px;
    border-color: transparent transparent #007bff transparent;
}
// 等腰下三角
.bottom-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 120px 100px 0 100px;
    border-color: #007bff transparent transparent transparent;
}
// 左下三角
.left-bottom-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 120px 0 0 120px;
    border-color: transparent transparent transparent #007bff;
}
//等腰左三角
.left-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 120px 100px 0;
    border-color: transparent #007bff transparent transparent;
}
//左上三角
.left-top-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 120px 120px 0 0;
    border-color: #007bff transparent transparent transparent;
}