【CSS】下矢印（三角）が付いたタイトルを作る

前回、「区切り線を曲線の矢印」にする記事を書きましたが、普通の三角矢印バージョンも紹介します。

以前にも同じような記事を書きましたが、改めてタイトルとして使える内容かと思います。

◆まずはデモページをご覧ください。

◆HTML

シンプルに「class」指定します。

<h1 class="ttl">下矢印が付いたタイトル</h1>

◆CSS

.ttl {
width: 100%;
position: relative;
color: #fff;
text-align: center;
padding: 30px;
background-color: #663300;
}
.ttl::after {
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 50%;
margin: 0 0 0 -50px;
border: 50px solid transparent;
border-top-color: #663300;
content: '';
}

「::after」で三角矢印の部分を作っています。

曲線矢印のように画像を用意しなくても、cssだけで実現できます。