CSSだけで【三角形】を作り、吹き出しを作ろう！

<div class="box3"></div>

.box3{
border: 10px solid orange;
}

padding（余白）もテキストも無い場合は、４辺がギュッと中央に寄せ集まって表示されます。

• ［要素の幅］＝100px
• ［要素の高さ］＝100px

<div class="box4"></div>

.box4{
border: 10px solid orange;
width: 100px;
height: 100px;
}

<div class="triangle2"></div>

.triangle2{
border-top: 10px solid orange;
border-right: 10px solid green;
border-bottom: 10px solid red;
border-left: 10px solid blue;
width: 0; /*要素の幅を「0」*/
height: 0; /*要素の幅を「0」*/
}

残った4か所の三角が中心に集まり、四角を作ります。
小っちゃいですが、実際に枠線幅「10px」で作った四角です。

参考までに、要素の幅と高さは「0」のまま、4辺とも幅50px、オレンジ色で作ってみました

topとleftボーダーの結合部分を使うとします。

1. 2辺を使って三角を出現させます。
   • border-topとborder-leftに、同じ枠線幅を設定します。（ここでは100px）
   • 要素には幅と高さは必要ないので、それぞれ「0」を指定します。

<div class="triangle-test1"></div>

.triangle-test1{
  width: 0px;
  height: 0px;
  border-top: 100px solid orange;
  border-left: 100px solid blue;
}

2. 表示したくない部分のborderを透明（transparent）にします。
   • オレンジを残したいので、青のborder-leftはカラーをtransparentにします。

<div class="triangle-test2"></div>

.triangle-test2{
border-top: 100px solid orange;
border-left: 100px solid transparent;
width: 0px;
height: 0px;
}

　　　完成！！

<div class="balloon-2">吹き出し出来たかな？</div>

.balloon-2{
  background: orange;
  padding: 6px 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.balloon-2::before{
  content: "";
  position: absolute;
  border-top: 70px solid orange; /* 三角形の高さ*/
  border-left: 40px solid transparent; /* 三角形の底辺*/
  width: 0;
  height: 0;
  left: 30px;
  top:100%;
}

<div class="balloon-3">吹き出し出来たかな？</div>

.balloon-3{
  background: orange;
  padding: 6px 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.balloon-3::before{
  content: "";
  position: absolute;
  border-top: 70px solid orange; /* 三角形の高さ*/
  border-left: 30px solid transparent; /* 三角形の底辺*/
  width: 0;
  height: 0;
  left: 30px;
  top: calc(100% + -10px); /* 三角表示位置（上から+角度変更分）*/
  transform: rotate(-20deg); /* 角度指定*/
}

「transform」は”変身”、

「rotate」は”回転”、

「deg」は角度を表す単位です。

視覚的な確認

HTMLでは、後から記述したコードが優先されるというルールがあります。一括設定プロパティのborderを先に記述し、そのあとでborder-topを記述します。

<div class="triangle-test3"></div>

.triangle-test3{
width: 0;
height: 0;
border: 50px solid #eeeeee; /*先に記述*/
border-top: 50px solid orange; /*後に記述*/
}

borderを透明にしよう

それでは、borderのカラー指定をtransparentに書き換えて、4辺を透明にしてみましょう。

.triangle-test3{
width: 0;
height: 0;
border: 50px solid transparent; /*透明指定は先に記述*/
border-top: 50px solid orange; /*後に記述*/
}

　完成！

たて長の三角形

<div class="triangle-test4"></div>

.triangle-test4{
width: 0;
height: 0;
border: 30px solid transparent; /*透明指定は先に記述*/
borer-top: 80px solid orange;/*後に記述*/
}

　完成！

確認のため、4辺に色を付けてみます。

注意点

borderを先に指定してあると、表示されない空間が生じます。

場合によってはこの空間が邪魔になることもあります。

そこでborderは使わず、必要な3辺のコードを個別に指定し、そのうち2辺を透明化する記述の仕方もあります。

.triangle-threesides{
border-top: 70px solid orange;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}

見た目の結果は同じだけど、余分な余白は無い。

特徴を把握したうえで使い分けていくのが良いと思います。

　この三角を使って吹き出しを作ってみます。

<div class="balloon-4">吹き出し出来たかな？</div>

.balloon-4{
  background: orange;
  padding: 6px 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.balloon-4::before{
  content: "";
  position: absolute;
  border: 10px solid transparent;
  border-top: 80px solid orange;
  width: 0;
  height: 0;
  left: 30px; /* 三角表示位置（要素左から）*/
  top: 100%; /* 三角表示位置（要素上から）*/
}