CSS在两个div之间划分

我一直在尝试创建以下内容（附加），我尝试了两个div，但必须通过相对位置移动一个。我尝试了两个divs，绝对值超过了三分之一，但需要太大的宽度才能将连接隐藏在下面！

这是代码：

<div class="title">
            <div class="left"></div>
            <div class="divide"></div>
            <div class="right"></div>
            <div class="name"><h1>Fuel Cards</h1></div>
        </div>

        <style>

            .title{
                position:relative;                  
            }

            .left{
                position:absolute;
                width:75%;
                left:0;
                background:red;
                height:80px;
            }

            .right{
                position:absolute;
                width:25%;
                right:0;
                background:black;
                height:80px;
            }

            .divide{
                width: 50px;
                height: 80px;
                background: white;
                -webkit-clip-path: polygon(75% 0%, 100% 0%, 25% 100%, 0% 100%);
                clip-path: polygon(75% 0%, 100% 0%, 25% 100%, 0% 100%);
                position:absolute;
                left:75%;
                z-index:1;
                float:left;
            }

            .name{
                position:relative;
                padding:10px 0;
                color:white;
                z-index: 1;
            }

            .shape{
                width: 50%;
                height: 280px;
                background: red;
                -webkit-clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
                clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
                float:left;
            }
            .shape2{
                width: 50%;
                height: 280px;
                background: black;
                -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
                float:left;
                position: relative;
                right:115px;
            }
        </style>

        <div class="shape"></div>
        <div class="shape2"></div>

反正可以帮忙吗？