CSSで括弧を表現したサンプル

正直微妙なので恐らく使うことないだろうっていうのもあるんですが、ちょっと使う機会があって実装できるのか試してみたので備忘録として残しておこうと思います。
「」（鉤括弧）や［］（角括弧）など、各種括弧をCSSで表現してみたサンプルです。
単純に文章内で使うのであればただのテキストを使うと思いますが、複数行をひとつの括弧で括るようなデザインにしたいときに使えます。

ここでは見栄えをイメージで紹介しており、実際の見栄えは下記で確認できます。

Demo

丸括弧（）

丸括弧（）の実装イメージ

頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。
HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。

<div class="parenthesis">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

.parenthesis {
  position: relative;
  width: 500px;
  padding: 15px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
  position: absolute;
  top: 0;
  content: '';
  width: 50px;
  height: 100%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  left: 0;
  border-left: 3px solid #555;
}
.parenthesis::after {
  right: 0;
  border-right: 3px solid #555;
}

鉤括弧「」

鉤括弧「」の実装イメージ

**鉤括弧「」**を表現してみたもので、先ほどの丸括弧に比べたら見た目も綺麗だし使いやすいと思います。
HTMLとCSSはそれぞれ下記のようになっており、括弧の太さやカラーはそれぞれborderの値をいじれば簡単に変更できます。

<div class="parenthesis">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

.parenthesis {
  position: relative;
  width: 500px;
  padding: 15px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  top: 0;
  left: 0;
  border-top: 1px solid #555;
  border-left: 1px solid #555;
}
.parenthesis::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
}

角括弧［］

角括弧［］の実装イメージ

**角括弧［］**を表現してみたもので、こちらも見た目も綺麗だし使いやすいと思います。
HTMLとCSSはそれぞれ下記のようになっており、鉤括弧と同様に括弧の太さやカラーはそれぞれborderの値をいじれば簡単に変更できます。

<div class="parenthesis">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
</div>

.parenthesis {
  position: relative;
  width: 500px;
  padding: 15px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
  position: absolute;
  top: 0;
  content: '';
  width: 20px;
  height: 100%;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  left: 0;
  border-left: 1px solid #555;
}
.parenthesis::after {
  right: 0;
  border-right: 1px solid #555;
}

角括弧［］の角丸実装イメージ

また、CSSのプロパティをひとつ追加するだけで見た目を少し変えることができ、イメージのような角丸な角括弧の見栄えにもできます。
HTML・CSSともに先ほどのものを利用しつつ、::before, ::afterにborder-radiusのプロパティを追記します。

.parenthesis::before {
  left: 0;
  border-left: 2px solid #555;
  border-radius: 8px 0 0 8px;
}
.parenthesis::after {
  right: 0;
  border-right: 2px solid #555;
  border-radius: 0 8px 8px 0;
}

隅付き括弧【】

隅付き括弧【】の実装イメージ

こちらは無理矢理な感じで見た目も微妙ですが**隅付き括弧【】**を表現してみたもので、HTMLとCSSはそれぞれ下記のようになっています。

<div class="parenthesis">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
  </div>
</div>

.parenthesis {
  width: 500px;
  padding: 0 10px;
  background-color: #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis>div {
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 15px;
}

外枠にあるdiv要素にpaddingとbackground-colorを指定して括弧となる部分を表現し、内側のdiv要素にbackground-colorとborder-radiusを使って外枠の背景色を見えないようにしつつ括弧の丸みの部分を表現しています。
ただ、注意としては外枠のdiv要素に指定した背景色を内側のdiv要素で見えなくする必要があるので、周りの背景によって（背景が単色ではない）は使えません...。

山括弧〈〉

山括弧〈〉の実装イメージ

紹介している中でもスマートに且つ汎用的な実装方法がある気が最もする感じですが**山括弧〈〉**を表現してみたもので、HTMLとCSSはそれぞれ下記のようになっています。

<div class="parenthesis">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p>
  </div>
</div>

.parenthesis {
  position: relative;
  width: 500px;
  padding: 15px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after,
.parenthesis > div::before,
.parenthesis > div::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 50%;
  background-color: #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  top: 0;
  left: 15px;
  margin-top: 4px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
.parenthesis::after {
  bottom: 0;
  left: 15px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.parenthesis > div::before {
  top: 0;
  right: 15px;
  margin-top: 4px;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.parenthesis > div::after {
  bottom: 0;
  right: 15px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

内外それぞれのdiv要素を使った擬似要素をtransform: rotateで傾け、position: absoluteで位置を決めています。
パッと見は出来てそうでもよく見ると重なり部分が綺麗でなかったり、中身によって都度調整が必要なので汎用性は低いです...。

鉤括弧と角括弧はまだ使える場面ありそうですが、その他のについてはもっと良い実装方法を探したりそもそも無理にCSSでやろうとせずに普通に画像を使った方が無難そうです。