css實現三角形相關

1.css樣式麪包屑導航條實現矩形和三角箭頭拼接
.cssTest {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #333333;
    line-height: 40px;
    /* 左側部分 */
    .cssTest1 {
        width: 750px;
        height: 40px;
        background-color: #D3D8DF;
        position: relative;
        display: inline-block;
    }
    .cssTest1:after {
        content: '';
        width: 0px;
        height: 0px;
        border-top: 20px solid rgba(255, 255, 255, 0);
        border-right: 20px solid rgba(255, 255, 255, 0);
        border-bottom: 20px solid rgba(255, 255, 255, 0);
        border-left: 20px solid #D3D8DF;
        left: 750px;
        position: absolute;
        z-index: 99;
    }
    .cssTest2 {
        width: 750px;
        height: 40px;
        background-color: #87AAD2;
        position: relative;
        display: inline-block;
        left: 50px;
    }
    .cssTest2:before {
        content: '';
        width: 0px;
        height: 0px;
        border-top: 20px solid #87AAD2;
        ;
        border-right: 20px solid #87AAD2;
        ;
        border-bottom: 20px solid #87AAD2;
        ;
        border-left: 20px solid rgba(255, 255, 255, 0);
        position: absolute;
        right: 750px;
    }
}

2.畫三角形的右上部分
<div class="example-content-image-status status-mutual"></div>
.example-content-image-status {
    z-index: 2;
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 1.875rem solid rgba(255, 255, 255, 0);
    border-left: 3.125rem solid rgba(255, 255, 255, 0);
    border-top: 1.875rem solid rgba(255, 255, 255, 0);
    border-right: 3.125rem solid rgba(255, 255, 255, 0);
    right: 0;
}
.status-mutual {
    border-top: 1.875rem solid #919191;
    border-right: 3.125rem solid #919191;
}