MENU

【コピペで使用OK！】CSSでつくるおしゃれなフキダシデザイン20選

コーディング デザイン
【コピペで使用OK！】CSSでつくるおしゃれなフキダシデザイン20選
misa

こんにちは、ウェブデザインパレットのmisaです。

HTMLとCSSだけで実装できる、おしゃれなフキダシデザインをまとめました。

コピペOKなので、ぜひアレンジして使ってみてくださいね＾＾

Contents

四角い細枠+背景色付きのフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-01">おしゃれなフキダシ</div>
CSS
.fukidashi-01 {
  position: relative;
  display: block;
  padding: 12px 15px;
  outline: 1px solid #333;
  outline-offset: 1px;
  background: #eee9e6;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-01::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50px;
  height: 16px;
  width: 15px;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
}

.fukidashi-01::after {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 56px;
  height: 16px;
  width: 15px;
  border-right: 1px solid #333;
  rotate: -40deg;
}

角丸の太枠+背景色付きのフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-02">おしゃれなフキダシ</div>
CSS
.fukidashi-02 {
  position: relative;
  display: block;
  padding: 12px 15px;
  outline: 2px solid #333;
  outline-offset: 2px;
  background: #e6eaee;
  border-radius: 10px;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-02::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50px;
  height: 16px;
  width: 15px;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
}

.fukidashi-02::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 56px;
  height: 16px;
  width: 15px;
  border-right: 2px solid #333;
  rotate: -40deg;
}

交差するフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-03">おしゃれなフキダシ</div>
CSS
.fukidashi-03 {
  position: relative;
  display: block;
  padding: 8px 32px;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-03::before,
.fukidashi-03::after {
  content: "";
  position: absolute;
  width: 1px;
  background: #333;
}

.fukidashi-03::before {
  left: -16px;
  top: 25%;
  rotate: 50deg;
  height: 120%;
}

.fukidashi-03::after {
  right: 8px;
  height: 120%;
  top: 50%;
  transform: translateY(-50%);
}

隙間の開いたフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-04">おしゃれなフキダシ</div>
CSS
.fukidashi-04 {
  position: relative;
  display: block;
  padding: 8px 32px;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-04::before,
.fukidashi-04::after {
  content: "";
  position: absolute;
  width: 1px;
  background: #333;
}

.fukidashi-04::before {
  left: -16px;
  top: 25%;
  rotate: 50deg;
  height: 120%;
}

.fukidashi-04::after {
  right: -8px;
  height: calc(100% - 16px);
}

シンプルな白抜きフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-05">おしゃれなフキダシ</div>
CSS
.fukidashi-05 {
  position: relative;
  display: block;
  padding: 24px 32px;
  border: solid 2px #333;
  border-radius: 48px;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-05::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-05::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: solid 2px;
  border-color: #333 #333 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

シンプルな塗りフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-06">おしゃれなフキダシ</div>
CSS
.fukidashi-06 {
  position: relative;
  display: block;
  padding: 24px 32px;
  border: solid 2px #333;
  border-radius: 48px;
  color: #fff;
  background-color: #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-06::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-06::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: solid 2px;
  border-color: #333 #333 transparent transparent;
  background-color: #333;
  rotate: 135deg;
  translate: -50%;
}

点線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-07">おしゃれなフキダシ</div>
CSS
.fukidashi-07 {
  position: relative;
  display: block;
  padding: 24px 32px;
  border: dashed 2px #333;
  border-radius: 48px;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-07::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-07::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: dashed 2px;
  border-color: #333 #333 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

二重線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-08">おしゃれなフキダシ</div>
CSS
.fukidashi-08 {
  position: relative;
  display: block;
  padding: 24px 32px;
  border: double 4px #333;
  border-radius: 48px;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-08::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-08::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: double 4px;
  border-color: #333 #333 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

斜めのフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-09">おしゃれなフキダシ</div>
CSS
.fukidashi-09 {
  position: relative;
  display: block;
  padding: 8px 32px;
  border: solid 1px #333;
  transform: skewX(-25deg);
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-09::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 30%;
    height: 28px;
    width: 28px;
    border-right: 1px solid #333;
    transform: rotate(40deg);
}

斜めの塗りフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-10">おしゃれなフキダシ</div>
CSS
.fukidashi-10 {
  position: relative;
  display: block;
  padding: 8px 32px;
  border: solid 1px #333;
  transform: skewX(-25deg);
  background-color: #333;
  color:#fff;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-10::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 30%;
    height: 28px;
    width: 28px;
    border-right: 2px solid #333;
    transform: rotate(40deg);
}

四角+片線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-16">おしゃれなフキダシ</div>
CSS
.fukidashi-16 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-16::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-16::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 42.5%;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-top: solid 1px;
  border-color: #333;
  rotate: 135deg;
}

四角+中心線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-15">おしゃれなフキダシ</div>
CSS
.fukidashi-15 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-15::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-15::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 39%;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-top: solid 1px;
  border-color: #333;
  rotate: 135deg;
}

しずく型のフキダシ

おしゃれな
フキダシ
コードを表示
HTML
<div class="fukidashi-17">おしゃれな<br>フキダシ</div>
CSS
.fukidashi-17 {
  position: relative;
  display: block;
  padding: 48px 30px 42px 36px;
  border: solid 1px #333;
  margin: 48px;
  border-radius: 50% 50% 0 50%;
  margin-inline: auto;
  width: fit-content;
}

しずく型の塗りフキダシ

おしゃれな
フキダシ
コードを表示
HTML
<div class="fukidashi-18">おしゃれな<br>フキダシ</div>
CSS
.fukidashi-18 {
  position: relative;
  display: block;
  padding: 48px 30px 42px 36px;
  border: solid 1px #333;
  background-color: #333;
  color: #fff;
  margin: 48px;
  border-radius: 50% 50% 0 50%;
  margin-inline: auto;
  width: fit-content;
}

丸いフキダシ

おしゃれな
フキダシ
コードを表示
HTML
<div class="fukidashi-19">おしゃれな<br>フキダシ</div>
CSS
.fukidashi-19 {
  position: relative;
  display: block;
  padding: 48px 36px;
  border: solid 1px #333;
  border-radius:50%;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-19::before {
  content: "";
  position: absolute;
  bottom: -5px;
  top: 80%;
  left:18%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-19::after {
  content: "";
  position: absolute;
  bottom: 9px;
  left: -1%;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-top: solid 1px;
  border-color: #333;
  rotate: 135deg;
}

丸い塗りフキダシ

おしゃれな
フキダシ
コードを表示
HTML
<div class="fukidashi-20">おしゃれな<br>フキダシ</div>
CSS
.fukidashi-20 {
  position: relative;
  display: block;
  padding: 48px 36px;
  border: solid 1px #333;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-20::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 4%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #333;
}

下線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-11">おしゃれなフキダシ</div>
CSS
.fukidashi-11 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border-bottom: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-11::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-11::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: solid 1px;
  border-color: #333 #333 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

下点線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-12">おしゃれなフキダシ</div>
CSS
.fukidashi-12 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border-bottom: dashed 2px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-12::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-12::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: dashed 2px;
  border-color: #333 #333 transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

片線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-13">おしゃれなフキダシ</div>
CSS
.fukidashi-13 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border-bottom: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-13::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-13::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 42.5%;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-top: solid 1px;
  border-color: #333;
  rotate: 135deg;
}

中心線のフキダシ

おしゃれなフキダシ
コードを表示
HTML
<div class="fukidashi-14">おしゃれなフキダシ</div>
CSS
.fukidashi-14 {
  position: relative;
  display: block;
  padding: 12px 24px;
  border-bottom: solid 1px #333;
  margin: 48px;
  margin-inline: auto;
  width: fit-content;
}

.fukidashi-14::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  background-color: #f8f8f8;　/*背景と同じ色に変更してください*/
  rotate: 135deg;
  translate: -50%;
}

.fukidashi-14::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 39%;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-top: solid 1px;
  border-color: #333;
  rotate: 135deg;
}

まとめ

今回は、コピペで使用できるシンプルでおしゃれなフキダシデザインをご紹介しました。

Webデザインの参考になれば幸いです＾＾

ボタンや見出しデザインの記事もぜひご覧ください👇💛

あわせて読みたい
【コピペで使用OK！】シンプルでおしゃれなCSSボタンデザイン（ホバーアニメーション付き） こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれなボタンのデザインをまとめました。 どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…
あわせて読みたい
【コピペで使用OK！】シンプルでおしゃれな見出しデザイン こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれな見出しデザインをまとめました。 どの見出しもHTMLとCSSのみで表示できます。 コピペOKなので、…

では、また～✨

コーディング デザイン
CSS HTML コピペ用コード デザイン

ABOUT ME

misaのアバター misa

現役インハウスWebデザイナー。
35歳、2児の母。
今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

RELATED POST

Contents