css - 「プレースホルダー」を作成するCSS部分境界線

Question

CSSを使用して、下の画像のように部分的な境界線を作成するにはどうすればよいですか

私は完全な境界線を得ることができます:

border: 1px solid #f5f5f5; 

しかし、垂直境界線の上部と下部に 30px だけを表示したいだけですか?

これは達成できますか？

いつもありがとう、

Answer 1

CSS ソリューションがありますが、複雑で、HTML マークアップも必要です。

#box {
    width: 200px;
    height: 200px;
    margin: 30px;
    position: relative;
}

#box > div.corner {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
}

.top {
    top: 0px;
    border-top-style: solid;
}

.bottom {
    bottom: 0px;
    border-bottom-style: solid;
}

.left {
    left: 0px;
    border-left-style: solid;
}

.right {
    right: 0px;
    border-right-style: solid;
}

<div id="box">
    <div class="corner top left"></div>
    <div class="corner top right"></div>
    <div class="content">content</div>
    <div class="corner bottom left"></div>
    <div class="corner bottom right"></div>
</div>

デモ