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

どうも、べ〜やんです。

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

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

三角形

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

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

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

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

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

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

三角形が出来る仕組み↓

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の太さで三角形の大きさを調節します。

４つの使用例↓

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);で斜めにする事もできます。

５つの使用例↓

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

おわりに

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

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