重なるboxでborderの一部を表示させたくない場合

ボックス要素どうしが重なる場合で、一部の重なる部分のみ
borderを表示したくない場合、どのように対応すればよろしいのでしょうか。
下記のサンプルコードでいうところの#hogeのborder-bottomを表示させずに
#fugaとあたかも一体のように表示させたいのですが、#hogeのみtransparentを指定しても
#fugaのborder-topの指定が残ってしまうため、うまく対応することができません。

よろしくお願いいたします。

jsFiddle

html
1<div id="hoge">
2tab
3</div>
4
5 <div id="fuga">
6  abcde
7 </div>

css
1#hoge{
2  margin-left:auto;
3  width:40px;
4  height:20px;
5  background-color:gray;
6  text-align:center;
7  border:1px solid black;
8  border-bottom:1px transparent solid;
9}
10
11#fuga{
12  margin-left:auto;
13  width:400px;
14  height:200px;
15  background-color:gray;
16  border:1px solid black;
17}

kei344

2018/04/22 10:52

質問文の行頭で「#」が出る場合は「`#fuga`」のようにバッククオートで囲んでください。

maguzo

2018/04/22 11:22

失礼いたしました。初めてそのような機能があることを知りました。修正いたしました

行動規範の内容に同意します

回答1件

ベストアンサー

hoge要素をrelativeにして重なり順を設定できるようにして上に重なるようにする。
それからborder-bottomをなしにして、ネガティブマージンを下に入れて（margin-bottom:-1px;）解決。

css
1#hoge{
2  margin-left:auto;
3  width:40px;
4  height:20px;
5  background-color:gray;
6  text-align:center;
7  border:1px solid black;
8  border-bottom:1px transparent solid;
9  margin-bottom:-1px;
10  border-bottom:none;
11  position:relative;
12  z-index:1;
13}
14
15#fuga{
16  margin-left:auto;
17  width:400px;
18  height:200px;
19  background-color:gray;
20  border:1px solid black;
21}