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

CSS在两个div之间划分

2 个答案: