縫い目を伴った吹き出し

こんな吹き出しはどうでしょう？

HTML

 

今回も訪問して下さりありがとうございます。

 

今回は少しオシャレな吹き出しを作ろうと思います。

 

ヒントになったのはこちらのBLOGです。

 

https://donaneight.hatenablog.com/entry/2020/07/02/075306

 

※レザーの縫い目が凄く綺麗ですよね！

   わざと縫い目を見せるってかっこいいから....。応用できないかな？

   なんて考えてみました。

 

●前回の吹き出しを参考に考える

 

 

●黄色い吹き出し●

 

 

●ピンクの吹き出し●

 

 

 前回はこんな感じの粗削り吹き出しに挑戦しました。

そして、実際にそこそこ使えてる気がしてますが....デザインがダサい(涙)

言われなくても分かってます。

なので変更しようと色々覗いてたんです。

 

●縫い目を見せる

 

 僕の中のイメージはこんな感じです。

この感じで吹き出しを作ってみる！

 

●Wordでのイメージ作成

 

Wordで作るとこんな感じですかねぇ～。

こんなの実際に出来る？かな？？

前回の吹き出しよりは少しオシャレな感じしますよね？

え？しない？

じゃ！どうしようもないですねぇ～。

僕は前回の吹き出しより少しバージョンUPしたと思いますので、

実際に書いてみようと思います。

 

●HTML記述

 

先ずは一番重要な縫い目の枠ですね！

 

●●●●●●

 

<div style="

padding: 1em;

border-radius: 2px;

background: #a6c3e5;

box-shadow: 0 0 0 8px #a6c3e5;

border: 2px dashed blue;

">●●●●●●</div>

 

 こんな感じですかねぇ～。

 

これに三角をくっつける作戦です。

 

では三角部分です。

 

 

 

上手く真ん中に三角を持ってこれました。

何とか整えれそうです。

HTMLコードです！

 

 <div style="

padding: 1em;

border-radius: 2px; background: #a6c3e5;

box-shadow: 0 0 0 8px #a6c3e5;

border: 2px dashed blue;

">完成しました！</div>
<center>
<div style="

width: 0px;

height: 0px;

border-top: 30px solid #a6c3e5;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

"> </div>
</center>

 

 

 

完成しました！

 

 

※少し文字を真ん中に移動させたり、太字にしたり変更してます。

でも、何とか出来ましたぁ～↑

 

●何とか出来ました！●
どーなんさんありがとう！

 

※思わぬところにヒントは隠れていると思います。

本物のレザーは扱えないけど…パソコンの中でなら作れますからねぇ。

コレ！やってみようと思ったら、すぐに実行して....何度か失敗して....また挑戦して...。

 

今回比較的上手く出来ましたねぇ。

ちょっとラッキーな完成でした。

 

 

 

●最後までお付き合い頂きありがとうございました。また会いましょう！

 

追記

 

早速使いたくなる僕です！！

なかなかいい感じですね。使い勝手も良いです！！