CODING

[CSS] CSSで吹き出し風デザイン・三角形

投稿日:


どうも、べ〜やんです。

今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。

三角形がぴょこって付いているアレです。





三角形


まずはCSSで三角形を作る方法をざっくり紹介します。

三角形はborderで表現しています。

横幅と高さを持った要素のborderの上下と左右で色を変えてみると、繋がり部分が斜めになっています。

この斜めになる設定を利用して三角形を作っていきます。

要素の横幅と高さをなくすと三角形が4つできます。

必要ない部分の三角形の色をtransparentにして透明にすると三角形が1つできます。

三角形が出来る仕組み↓

See the Pen MWWXgEv by beeyan (@orientado) on CodePen.



borderに付いてはこちらもどうぞ↓

[css] borderで枠線をつける方法


吹き出し風デザイン


三角形を利用して吹き出しを作ってみます。

CSSの例↓

.content1 {
  margin: 15px;
  display: inline-block;
  position: relative;
  padding: 10px;
  min-width: 100px;
  color: #333;
  font-size: 16px;
  background: skyblue;
}
.content1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid skyblue;
}

三角形部分は擬似要素(:before)で作っています。

position: relative;position: absolute;を使って位置を指定。

borderの色を一旦全てtransparentで透明にしてから、topのみに色を与えています。

borderのどの部分だけに色をつけるかによって三角形の向きを変えます。

borderの太さで三角形の大きさを調節します。

4つの使用例↓

See the Pen zYYaOOd by beeyan (@orientado) on CodePen.


丸ポイント


丸に三角形をつけるとポイントにできます。

CSSの例↓

.content1 {
  margin: 15px;
  display: inline-block;
  position: relative;
  padding: 10px;
  width: 50px;
  height: 50px;
  color: #333;
  font-size: 16px;
  background: limegreen;
  text-align: center;
  border-radius: 50%;
}
.content1:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid limegreen;
}

横幅と高さを同じにして正方形を作ってborder-radius: 50%;で角を丸くすると円が作れます。

transform: rotate(45deg);で斜めにする事もできます。

5つの使用例↓

See the Pen XWWYrje by beeyan (@orientado) on CodePen.


おわりに


今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介しました。

三角形をつける場所を調整したり角を丸くしたり色を変えたりと、色々アレンジして使ってみてください。



-CODING
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

BEMを意識しよう

どうも、べ〜やんです。 今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。 HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。 BEM …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …