CSS разделите между двумя divs

Question

Я пытался создать следующее (прилагаемое), я пробовал два 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> 

Может так или иначе помочь, пожалуйста?

Answer 1

Вы можете сделать это с линейным градиентом, хотя я бы, вероятно, использовать SVG для лучшего масштабирования.

div { 
 
    width: 200px; 
 
    height: 75px; 
 
    margin: 1em auto; 
 
    background: linear-gradient(315deg, red, red 48%, white 48%, white 52%, black 52%); 
 
}

<div></div>

Answer 2

Вот еще один метод, который работает в ie8, если это необходимо. Используйте до и после псевдоэлементов, с границами для рисования треугольников.

https://jsfiddle.net/xv661pe1/

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