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] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

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

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

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …