CSS 在两个 div 之间划分

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中使用。使用before和after伪元素，带边框画三角形。

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

CSS 在两个 div 之间划分

CSS divide between two divs

css

styling

shapes