[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。

上がborder:1px;の状態、下がbox-shadowで一つにした状態です。

Drop shadow for 2 elements preserving the intersection in CSS

凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。
※このデモではトグルとしての機能は実装されていません。

デモページ

実装は非常にシンプルです。

HTML

二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。

<div class="block">
  <div class="innerblock">
    <p>上のボックス</p>
  </div>
  <a href="#" class="block_toggle">下のボックス</a>
</div>

CSS

まずは、ラッパーにbox-shadow適用し、下のトグルでトグルの箇所のみシャドウを一旦消し、新たにトグル用のbox-shadowを設定します。

.block {
  position: relative;
  z-index: 10;
  width: 80%;
  height: 6em;
  margin: 1em auto;
  padding: 0.25em 0.5em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}

.block_toggle {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;

  width: 8rem;
  margin-left: -5rem; /* 4rem + 1rem, because padding is added up */
  padding: 0.5rem;
  text-align: center;
  background: #fff;
  color: green;
  
  /* This adds the box shadow of the toggler */
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.25), 
              3px 1px 3px -2px rgba(0, 0, 0, 0.25), 
              -3px 1px 3px -2px rgba(0, 0, 0, 0.25);
}