CSSでカンバンのようなタイトルを作成する

実現したいこと

• 上図のようなかわいいタイトルを作成したい。
• 文字数に応じて幅が伸縮するようにしたい。
• 画像を使いたくない。

実装方法

<h2 class="headline">見出し</h2>

/* 1.カンバンの板 */
.headline {
  background-color: #ec685b;
  border-radius: 6px;
  box-shadow: 0 -2px 0 #f0a39b;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 0 0 2em;
  padding: 0.5em 1em;
  position: relative;
}
/* 2.カンバンの棒 */
.headline::before,
.headline::after {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  content: '';
  display: block;
  left: 10%;
  position: absolute;
  width: 80%;
}
.headline::before {
  top: -5px;
  height: 4px;
}
.headline::after {
  bottom: -12px;
  height: 12px;
}

1. カンバンの板にあたる部分を作成
2. before, afterで棒にあたる部分を作成

簡単なので、ぜひやってみてください。