画像を使わずに凸型で半透明の角丸枠をつくる

画像を使わずに、半透明の線、角丸で、一部が凸型に飛び出した装飾フレームを作ってみました。

See the Pen decoration frame by webdev (@webdev-jp-net) on CodePen.0

構造

凸型に飛び出した部分を真ん中に挟むため
角丸枠の上辺だけ、before after で分けているところがポイントです。

このサンプルでは飛び出した部分をドームにしていますが
飾りなしで – A – のようにしたり
半円のかわりに画像を使っても違った飾りかたができます。

関連記事