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

関連記事

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …