画像を使わないレスポンシブ飾りフレーム

DTP専門のデザイナーさんがウェブサイトのデザインをすると、「これ無理じゃね？」っていうパーツを使う場合があります。
たとえば、こんな飾りフレーム。

ひと昔前なら画像を使って即解決でしたが、時代はレスポンシブ。
デバイスに合わせ、縦横柔軟に可変できないと使えません。

あまり複雑なものなら「無理！」ってはっきり言いますが、これくらいならCSSで実装できちゃいます。
まずは基本となる外側の太い線から作ってみましょう。

.thick {
border: 2px solid #ca4;
padding: 1em;
color: #ca4;
font-weight: 600;
text-align: center;
}


FRAME


CodePen Embed Fallback

ここまでは楽勝ですが、問題は「角」。
CSSには角丸しかないため、内側の角丸（Scoop）はできませんね。

そこで！疑似要素を使って、それぞれの角に円を配置します。

.thick {
position: relative;
border: 2px solid #ca4;
padding: 1em;
color: #ca4;
font-weight: 600;
text-align: center;
}
.thick:before,
.thick:after,
.circle:before,
.circle:after {
position: absolute;
display: block;
border-radius: 50%;
width: 20px;
height: 20px;
content: "";
background-color: #fff ;
border: 2px solid #ca4;
}
.thick:before {
top: -12px;
left: -12px;
}
.thick:after {
top: -12px;
right: -12px;
}
.circle:before {
right: -12px;
bottom: -12px;
}
.circle:after {
left: -12px;
bottom: -12px;
}



FRAME



CodePen Embed Fallback

さらに外枠をつけてはみ出した要素を「overflow: hidden;」で隠します。

.over {
overflow: hidden;
}




FRAME




CodePen Embed Fallback

あとは内側に、細い線をつけます。
この時、pタグの後に設置するのがポイントです。

.thin {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
border: 1px solid #ca4;
z-index: 1;
}




FRAME





完成した、飾りフレームが↓こちら！

CodePen Embed Fallback

タグ多すぎｗ