css - 純粋なcssでエッジに触れていない二重境界線を作成するには?

Question

ナビゲーション デザインでは、このような境界線を付ける必要があります。二重ボーダーの作成方法は知っていますが、上下に隙間のあるボーダーの作成方法がわかりません。

画像を使用して実行できることは知っていますが、CSSのみで作成できるかどうか知りたいです

Answer 1

はい、CSSだけで簡単にできます。

デモ

HTML :

<ul class='navigation'>
    <li><a href='#'>nav item</a></li>
    <!-- as many navigation items as you would like -->
    <li><a href='#'>nav item</a></li>
</ul>

関連するCSS :

.navigation { padding: 0; list-style: none; }
.navigation li {
    float: left;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    padding: .5em;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child a { border-left: none; }
.navigation li:last-child a { border-right: none; }

---

または、上部と下部にクリックできない領域を設けたくない場合は、別の方法で試すことができます。

デモ

CSS :

.navigation {
    display: inline-block;
    overflow: hidden;
    padding: .35em 0;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    background: linear-gradient(#fafafa, #e5e5e5);
    list-style: none;
}
.navigation li {
    float: left;
    border-left: solid 1px #fff;
    border-right: solid 1px #a4a4e3;
}
.navigation a {
    display: block;
    padding: .5em;
    margin: -.35em 0;
    color: #000;
    text-decoration: none;
}
.navigation li:first-child { border-left: none; }
.navigation li:last-child { border-right: none; }

---

これを行う 3 つ目の方法として、クリック可能な領域を境界線まで拡張する方法として、リンク上で疑似要素を使用して横方向の境界線を取得する方法があります。

デモ

CSS :

.navigation { margin-top: 7em; list-style: none; }
.navigation li {
    float: left;
    background: linear-gradient(#fafafa, #e5e5e5);
}
.navigation a {
    display: block;
    position: relative;
    padding: .85em;
    border-top: solid 2px #e4e4e3;
    border-bottom: solid 3px #94a10f;
    color: #000;
    text-decoration: none;
}
.navigation a:before {
    position: absolute;
    top: .35em; bottom: .35em; left: 0;
    border-right: solid 1px #fff;
    border-left: solid 1px #a4a4e3;
    content: '';
}
.navigation li:first-child a:before { border: none; }