【CSS】角端透明のタイトルの後ろなど

背景画像などを透かす

.title1 {
    position: relative;
    padding: 4px 20px 4px 20px;
    background: #4B4B4B;
    z-index:1;
    color:#ffffff;
    display: inline-block;
    font-size: 22px;
}

.title1:before,.title1:after {
    position: absolute;
    border-style: solid;
    border-color: transparent;
}
    
.title1:before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 2em #fafcfc;
    border-bottom: solid 2em transparent;
    z-index: -1;
}

    .title1:after {
        position: absolute;
        content: '';
        right: -43px;
        top: 0;
        width: 0;
        height: 0;
        border: none;
        border-left: solid 43px transparent;
        border-bottom: solid 43px #4b4b4b;
        z-index: -1;
        transform: rotate(90deg);
    }

afterの

transform: rotate(90deg);が重要