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] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

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

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

爆速!!Emmetを使う

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

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …