CSS
デザイン

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で棒にあたる部分を作成

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