は、私はこのようになりますパターンを作成しようとしている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>