枠線つきの三角形を作る方法。対角線を使った三角形を使って吹き出しを作る。
CSSで枠線つきの三角形を使った吹き出しを作る際に、四辺のどれか２つを使う三角形は比較的に簡単にできたが、
対角線を使った三角形を作るのに手間取ったので、その作り方について。
完成イメージ
画像を設置して、その横に吹き出しを作成する。
欲しい三角形は上図の右側。対角線を使ったもの。
目次
作り方
divタグを使って対角線を使った三角形に枠線をつけることはできない。
このため、枠線の色で塗り潰した三角形を作って、上から少し小さい白い三角形を重ねる。
グレーの三角を重ねた場合のイメージ。（白だと見えないので）
吹き出しの外枠をdivタグで作成し、枠線の三角を::beforeで、内側の白い三角形を::afterで作って配置する。
吹き出しのコード
<div class="img-balloon_balloon">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
.img-balloon_balloon {
margin-left: 24px;
padding: 16px;
width: 100%;
font-size: 15px;
color: #333;
border: solid 1px #ccc;
border-radius: 8px;
position: relative;
}
.img-balloon_balloon::before {
content: "";
border-left: 16px solid transparent;
border-top: 16px solid #ccc;
position: absolute;
top: 16px;
left: -16px;
}
.img-balloon_balloon::after {
content: "";
border-left: 15px solid transparent;
border-top: 15px solid white;
position: absolute;
top: 17px;
left: -14px;
}
以上で吹き出しが完成。
画像も含めたコード
画像と吹き出しを横並びにするため、display:flexを使う。
位置は上端合わせにするため、align-items: flex-start;も適用する。
<div class="img-balloon_balloon">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
.img-balloon_wrapper {
margin: 8px 0;
display: flex;
align-items: flex-start;
}
.img-balloon_img {
width: 64px;
height: auto;
}
.img-balloon_balloon {
margin-left: 24px;
padding: 16px;
width: 100%;
font-size: 15px;
color: #333;
border: solid 1px #ccc;
border-radius: 8px;
position: relative;
}
.img-balloon_balloon::before {
content: "";
border-left: 16px solid transparent;
border-top: 16px solid #ccc;
position: absolute;
top: 16px;
left: -16px;
}
.img-balloon_balloon::after {
content: "";
border-left: 15px solid transparent;
border-top: 15px solid white;
position: absolute;
top: 17px;
left: -14px;
}
対角線を使った三角形の作成方法の詳細
対角線を使った三角形について細かく見てみる。
単なるdivタグ
まずはベースとして、単なるdivタグに枠線をつけた状態を確認。
.sankaku{
border: 32px solid yellowgreen;
}
divタグはブロック要素のため横幅の指定がないと画面いっぱいに広がる。この四角形が、どのように構成されているかを知ることがカギとなる。
四角形は、boarder-top, -right, -bottom, -leftの４つの要素で構成される。
border: 32px solid yellowgreen;
↓ 同じ
border-top: 32px solid yellowgreen;
border-right: 32px solid yellowgreen;
border-bottom: 32px solid yellowgreen;
border-left: 32px solid yellowgreen;
なので、boarderで指定したdivタグの高さはtopとbottomを合わせた、64px = 32px + 32pxとなる。（※32pxでないことに注意！）
色分けして確認
わかりやすくそれぞれを色分けしてみる。
.sankaku{
border-top: 32px solid yellow;
border-right: 32px solid blue;
border-bottom: 32px solid pink;
border-left: 32px solid red;
}
横幅は指定してないので、画面幅に合わせて変化する。
横幅をなくす
display: inline-blockとすることで、横幅を中の要素に合わせることができる。
- 中身なしの場合、縦幅・横幅は０ｐｘ（外側に枠線borderが表示される）
- 中身がある場合はその長さに自動調整される。
.sankaku{
display: inline-block;
border-left: 32px solid red;
border-right: 32px solid blue;
border-bottom: 32px solid pink;
border-top: 32px solid yellow;
}
ここで単純に、黄色と赤色の２つで対角線を使った三角形が作れるじゃん！と思うとborderのワナにハマる、、、
指定してある要素の数（borderの数）によって四角形の形が大きく変わってくる。
▼（参考）中身を入れた場合
<div class="sankaku">中身がある場合</div>
borderの数による四角形の形の違い
borderを指定する数によって、形状が変化していく。
- 4辺を指定： 大きな正方形
- 3辺を指定： 長方形
- 2辺を指定： 小さな正方形
2辺を指定した小さな正方形
小さな正方形は指定の組み合わせによって、同じ形状が作れる。
なお、border-topと-bottom, border-leftと-rightの組み合わせは何も表示されない。
対角線を使った三角形を作る方法
対角線を使った三角形を作る方法は２つある。
- ４辺を指定した三角形のうち、２辺を透明にする
- ２辺を指定した三角形のうち、１辺を透明にする
４辺を指定した三角形のうち、２辺を透明にする
.sankaku{
display: inline-block;
border: 32px solid transparent;
border-top: 32px solid yellow;
border-right: 32px solid blue;
}
この色を同じ色にすれば、対角線を使った三角形になる。
▼実態
上記はborderで４つまとめてtransparentに設定した後に上書きしたが、４つそれぞれを設定するのでも同じ。
.sankaku{
display: inline-block;
border-top: 32px solid yellow;
border-right: 32px solid blue;
border-bottom: 32px solid transparent;
border-left: 32px solid transparent;
}
コード量からすると、borderを使い、上書きする方が少ない。
２辺を指定した三角形のうち、１辺を透明にする
.sankaku{
display: inline-block;
border-top: 32px solid yellow;
border-left: 32px solid transparent;
}
▼実態
上記は、-topと-leftを使ったが、-bottomと-rightでも作成できる。
.sankaku{
display: inline-block;
border-right: 32px solid blue;
border-bottom: 32px solid transparent;
}
