プログラミング

【CSS】三角形の擬似要素をつくって、吹き出し型のタイトルを作ろう 

スポンサーリンク

吹き出し
今回は、擬似要素で三角形をつくり、吹き出し型のタイトルを作る方法を御紹介します。

ちなみにこんなやつです↓

ふきだし 

いろいろなサイトを見たり、模写したりしているとけっこう見かけますよね。
でも、これってどうやるんだろ、という方は参考にしてください。



サンプルコード

HTML

<div class="balloon">
<h3 >タイトル</h3>
</div>

CSS

.balloon{
  position: relative;
  background: #3B4552;
  text-align: center;
  color:white;
  height: 150px;
}
.balloon:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #3B4552 transparent transparent transparent;
  border-width: 20px 50px 0 50px;
}

 

詳しくはこちらを参考にしてください。

CSSで三角形を作る方法

まとめ

コードの意味を解説するより、

実際に色や数値を変えることで、
どのように変化するか確認した方が理解が速いと思います。

いろいろとアレンジしてみてください。

 

Bootstrap関連の記事も紹介しておきます↓

スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5