尖らせる矢印 作り方

Question

前提・実現したいこと

html/cssを使い、画像のようなものを作りたいのですが、どうやったら下の尖っている部分を作るのかが、分かりません。
どうやって作るのかを、ご教授お願い致します。

Answer 1

三角形だけ二重線にするのは案外難しい。
以下のCSSを使って、div要素にclass="balloon"を指定すると、こんな感じ。

補足: 三角形部分をより小さくするために、rotateとscaleYで変形させた。この変形により細く見えてしまう三角形部分のborderの太さや位置も微調整。

↓

.balloon {
    position: relative;
    height: 80px;
    width: 400px;
    color: black;
    background: white;
    border: 2px lightblue solid;
}

.balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    height: 20px;
    width: 20px;
    background: inherit;
    transform: scaleY(0.5) rotate(45deg);
    transform-origin: top right;
}

.balloon:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 3px;
    margin-left: -7px;
    height: 20px;
    width: 20px;
    background: transparent;
    transform: scaleY(0.5) rotate(45deg);
    transform-origin: top right;
    border-bottom: 8px lightblue double;
    border-right: 8px lightblue double;
}

.balloon * {
    text-align: center;
}

Comments

[muneyosi]

コードまで載せて頂きありがとうございます。

見本の画像のように、もう少し高さを小さくしたいのですが、どうすれば実装できるでしょうか？

ご回答いただけますと幸いです

[Daregada]

この回答の手法は、四角形の領域をrotateで45度回転させて三角形を作っています。変形の際にscaleYを組み合わせれば三角形を潰した形に見せられるでしょう。

あなたが引用した吹きだしは、おそらく異なる方法で作られていますが、質問に「それが使われているページなど」の情報がないため、これ以上のことは言えません。

[muneyosi]

そうだったんですね
これで実装してみようと思います！

大変参考になりました。
本当にありがとうございます。

Answer 2

CSS 三角形 吹き出しでネット検索していただくとサイトがたくさん見つかりますので読まれると良いです。

CSSだけで三角形を作ろう

CSSで作る！吹き出しデザイン