html - ファンシーボーダーディバイダー

Question

以下を作成しようとしています (両端に 1 ピクセルのギャップがあることに注意してください)。

Answer 1

試してみると：

<hr class="fancy">

次の CSS を使用します。

hr.fancy {
    border: 1px solid black;
    border-width: 1px 0px;
    color: black;
    height: 5px;
    position: relative;
}
hr.fancy:after {
    content: '\A';
    position: absolute;
    bottom: -1px;
    right: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-left: 1px solid white;
}
hr.fancy:before {
    content: '\A';
    position: absolute;
    bottom: -1px;
    left: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-right: 1px solid white;
}

見てみましょう: http://jsfiddle.net/audetwebdesign/P7umD/

ピクセル幅を調整して、より大胆な外観にすることができます。

ブラウザの互換性
Firefox と Chrome でこれを確認したところ、マークアップは一貫してレンダリングされます。

ただし、IE9 では機能しません。ブックエンドではなく、二重線のみが表示されます。

Answer 2

多分border-imageトリックをするでしょう

http://www.w3schools.com/cssref/css3_pr_border-image.asp

http://css-tricks.com/understanding-border-image/

divまたは、ベースのソリューションを使用できます

<div class="border">
    Content

    <div class="left"></div>
    <div class="right"></div>
</div>



.border {
    border-width:0px;
    border-style: double;
    border-color: grey;
    border-bottom-width: 3px;
    position: relative;
}
.left,
.right{
    position: absolute;
    width: 1px;
    height: 3px;
    bottom: -3px;
    background-color: white;
}
.left {
    left: 1px;
}
.right {
    right: 1px;
}

http://jsfiddle.net/zCEKp/

Answer 3

これは、あなたの望むことですか？

HTML:

<div class="box">
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
</div>

CSS:

.box{
    position:relative;
    border:3px double;
    width:100px;
    height:50px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
    position:absolute;
    width:4px;
    height:4px;
    border-left:1px #fff solid;
    border-right:1px #fff solid;
}
.top-left, .top-right{
    top:-4px;
}
.top-left, .bottom-left{
    left:-4px;
}
.top-right, .bottom-right{
    right:-4px;
}
.bottom-left, .bottom-right {
    bottom:-4px;
}

jsFiddle の例を次に示します。