Клип фона за исключением изображения в CSS

Question

Я пытаюсь сделать шаблон, который выглядит следующим образом: раскол

линии границы символ «или».

Следующий мой код.

#container { 
 
    height: 300px; 
 
    background: url(http://www.noupe.com/wp-content/uploads/2009/10/pattern-03.jpg); 
 
    background-size: cover; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
#div1 { 
 
    float: left; 
 
    width: 50%; 
 
    border-right: 2px solid white; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
#div1:after { 
 
    content: 'Or'; 
 
    padding: 20px; 
 
    top: 40%; 
 
    position: absolute; 
 
    right: 0; 
 
    padding-right: 0px; 
 
    margin-right: -7px; 
 
    color: #fff; 
 
    background: #ccc; 
 
} 
 
#div2 { 
 
    float: left; 
 
    width: 50%; 
 
    height: 300px; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div id="container" class="clearfix"> 
 

 
    <div id="div1"> 
 

 
    </div> 
 
    <div id="div2"> 
 

 
    </div> 
 

 
</div>

Я ищу способ, чтобы удалить часть линии от периметра div1:after - в div, который содержит «или», есть способ добиться этого в CSS с этой разметкой?

Answer 1

Просто раскол линии двух элементов и сдвигать их в сторону от "или":

#container { 
 
    height: 300px; 
 
    background: url(http://www.noupe.com/wp-content/uploads/2009/10/pattern-03.jpg); 
 
    background-size: cover; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
#div1 { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -20px; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 40px; 
 
} 
 
#div1 span { 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    margin-top: -10px; 
 
    color: white; 
 
    display: inline-block; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#div1:before, 
 
#div1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 19px; 
 
    width: 2px; 
 
    height: 50%; 
 
    background-color: white; 
 
} 
 
#div1:before { 
 
    top: -20px; 
 
} 
 
#div1:after { 
 
    bottom: -20px; 
 
}

<div id="container" class="clearfix"> 
 
    <div id="div1"><span>OR</span> 
 
    </div> 
 
</div>

Answer 2

Не может быть правильного ответа, но может помочь вам приступить к работе. Обходной

#container { 
 
    height: 300px; 
 
    background: url(http://www.noupe.com/wp-content/uploads/2009/10/pattern-03.jpg); 
 
    background-size: cover; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
#div1 { 
 
    float: left; 
 
    width: 50%; 
 
    border-right: 2px solid white; 
 
    height: 40%; 
 
    position: relative; 
 
} 
 
#div1:after { 
 
    content: 'Or'; 
 
    padding: 20px; 
 
    top: 100%; 
 
    position: absolute; 
 
    right: 0; 
 
    padding-right: 0px; 
 
    margin-right: -7px; 
 
    color: #fff; 
 
} 
 
#div2 { 
 
    margin-top: 50px; 
 
    float: left; 
 
    width: 50%; 
 
    border-right: 2px solid white; 
 
    height: 40%; 
 
    position: relative; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div id="container" class="clearfix"> 
 
    <div id="div1"> 
 

 
    </div> 
 
    <div id="div2"> 
 

 
    </div> 
 
</div>