css - CSSを使用して境界線付きのフォルダタブスタイルのdivを形成しようとしています

Question

cssでボーダー付きのフォルダースタイルのdivを作成しようとしていますが、2つの部分を分離しているボーダーを取り除くことができないようです。

これが私がこれまでに得た距離です：http：//jsfiddle.net/Argoron/GUtDy/12/

ヘッダーdivとコンテンツdivを区切る境界線を回避する方法がわかりません。

よろしくお願いします！

Answer 1

The correct approach would be to place one 1px (or npx, where n is the border width) over the other, then place the tab over the tabbed area with z-index.

Code

I didn't use your code, but instead constructed from mine.

HTML

<div id="wrapper">

    <h1>HEADER</h1>

    <div id="content-container">
        Content
    </div>

</div>

CSS

/* Tabbed view without separation border */
* {
    padding: 0;
    margin:  0;
}

#wrapper {
    width:   600px;
    padding: 10px;
    margin:  10px;
}

body {
    font-family: arial, serif;
}

h1, #content-container {
    border: 1px solid rgb(0, 0, 0);

}

h1 {
    /* This is the important part! */
    border-radius:       6px 6px 0 0;
    display:             inline-block;
    position:            relative;
    top:                 1px; /* Offset one pixel to the bottom */
    border-bottom-color: white; /* white border overrides black. white should be the same as the background color */
}

#content-container {
    border-radius: 0 6px 6px 6px;
}