CSS在两个div之间划分

我一直在尝试创建以下内容（附件），我尝试了两个div，但必须通过相对位置移动一个。我尝试了两个

div

，其中第三个是绝对值，但是需要太多的宽度来隐藏下面的连接

代码如下：

<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>

燃料卡
.头衔{
位置：相对位置；
}
.左{
位置：绝对位置；
宽度：75%；
左：0；
背景：红色；
高度：80px；
}
.对{
位置：绝对位置；
宽度：25%；
右：0；
背景：黑色；
高度：80px；
}
.分开{
宽度：50px；
高度：80px；
背景：白色；
-webkit剪辑路径：多边形（75%0%、100%0%、25%100%、0%100%）；
剪辑路径：多边形（75%0%，100%0%，25%100%，0%100%）；
位置：绝对位置；
左：75%；
z指数：1；
浮动：左；
}
.姓名{
位置：相对位置；
填充：10px0；
颜色：白色；
z指数：1；
}
.形状{
宽度：50%；
高度：280px；
背景：红色；
-webkit剪辑路径：多边形（0%0%、100%0%、75%100%、0%100%）；
剪辑路径：多边形（50%0%，100%0%，50%100%，0%100%）；
浮动：左；
}
.shape2{
宽度：50%；
高度：280px；
背景：黑色；
-webkit剪辑路径：多边形（25%0%、100%0%、100%100%、0%100%）；
剪辑路径：多边形（50%0%，100%0%，50%100%，0%100%）；
浮动：左；
位置：相对位置；
右：115px；
}

你能帮忙吗

---

您可以使用线性渐变来实现这一点，尽管我可能会使用SVG来实现更好的缩放效果

div{
宽度：200px；
高度：75px；
保证金：1em自动；
背景：线性梯度（315度，红色，红色48%，白色48%，白色52%，黑色52%）；
}

---

您可以使用线性渐变来实现这一点，尽管为了更好地缩放，我可能会使用SVG

div{
宽度：200px；
高度：75px；
保证金：1em自动；
背景：线性梯度（315度，红色，红色48%，白色48%，白色52%，黑色52%）；
}

---

这里有另一种方法，如果需要，它可以在ie8中工作。在伪元素之前和之后使用，并带有边框来绘制三角形

.fuelcards{
背景色：#fff；宽度：100px；高度：80px；位置：相对；
左边框：40px实心红色；
右边框：40px纯黑；
}
.fuelcards:在{
内容：“；
显示：块；宽度：0；高度：0；
位置：绝对；左侧：0；顶部：0；
边框：40px实心透明；
边框顶部颜色：红色；边框左侧颜色：红色；
}
.fuelcards:在{
内容：“；
显示：块；宽度：0；高度：0；
位置：绝对；右侧：0；顶部：0；
边框：40px实心透明；
边框底部颜色：黑色；边框右侧颜色：黑色；
}

如果需要，还有另一种方法可以在ie8中使用。在伪元素之前和之后使用，并带有边框来绘制三角形

.fuelcards{
背景色：#fff；宽度：100px；高度：80px；位置：相对；
左边框：40px实心红色；
右边框：40px纯黑；
}
.fuelcards:在{
内容：“；
显示：块；宽度：0；高度：0；
位置：绝对；左侧：0；顶部：0；
边框：40px实心透明；
边框顶部颜色：红色；边框左侧颜色：红色；
}
.fuelcards:在{
内容：“；
显示：块；宽度：0；高度：0；
位置：绝对；右侧：0；顶部：0；
边框：40px实心透明；
边框底部颜色：黑色；边框右侧颜色：黑色；
}

请向我们展示您迄今为止尝试过的代码？请提供您正在尝试的代码。您可以使用CSS-伪元素来创建这种类型的形状。请向我们展示您迄今为止尝试过的代码？请提供您正在尝试的代码。您可以使用CSS-伪元素创建这种类型的形状。简短且最佳的解决方案。您好，Paulie\D，你能解释一下吗。如何使用线性渐变。好的，谢谢。：）简短而最好的解决方案。嗨，保利，你能解释一下吗。如何使用线性渐变。好的，谢谢。：）

<div class="fuelcards"></div>

.fuelcards { 
  background-color: #fff; width:100px; height:80px; position:relative; 
  border-left:40px solid red; 
  border-right:40px solid black; 
}
.fuelcards:before { 
content:"";
display:block; width:0; height:0; 
position:absolute; left:0; top:0; 
border:40px solid transparent; 
border-top-color:red; border-left-color:red;
}
.fuelcards:after { 
content:"";
display:block; width:0; height:0; 
position:absolute; right:0; top:0; 
border:40px solid transparent; 
border-bottom-color:black; border-right-color:black;
}