鉤括弧の様な装飾をつけたいです。

Question

以下の様な感じでcssで鉤括弧のような装飾をつけたいのですが、
どのようにすれば良いでしょうか？
（鉤括弧は画像で構いません）

擬似要素が最初に頭に浮かんだのですが、
:beforeと:afterを使っても、2つしか付けられないな、、と思いまして、
どなたか、お知恵を拝借願いますm(_ _)m

Answer 1

こんばんは。

border-imageを使うのはどうでしょうか。

サンプル

div{
  width: 100px;
  height: 100px;
  border-image: url(https://teratail-v2.storage.googleapis.com/uploads/contributed_images/13df435eca15ea340fbf2911076e0fa7.png) 11 / 10px;
}

border-image - CSS: カスケーディングスタイルシート | MDN

Answer 2

カギカッコを付けたい要素の比率に合致したカギカッコ以外は透過した画像を用意してpositionを使って重ねる