cssで作るふきだしサンプル



たまに使う時になると思い出すのが大変なので、備忘録としてサンプルとともに。

共通css

.box{
      position: relative;
      padding:20px;
      background:#ccc;
      width:540px;
    }

ふきだし下付

ふきだし1

html

<div class="box box1">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

css

.box1:after{
      position: absolute;
      content:"";
      top:100%;
      right:60px;
      width:0;
      height:0;
      border: solid 20px transparent;
      border-top-color:#ccc;
    }

ふきだし上付

ふきだし2

html

<div class="box box2">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

css

.box3:after{
      position: absolute;
      content:"";
      top:60px;
      left:100%;
      width:0;
      height:0;
      border:solid 20px transparent;
      border-left-color:#ccc;
    }

ふきだし右付

ふきだし3

<div class="box box3">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

css

.box3:after{
      position: absolute;
      content:"";
      top:60px;
      left:100%;
      width:0;
      height:0;
      border:solid 20px transparent;
      border-left-color:#ccc;
    }

ふきだし左付

ふきだし4

html

<div class="box box4">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

css

.box4:after{
      position: absolute;
      content:"";
      top:60px;
      right:100%;
      width:0;
      height:0;
      border:solid 20px transparent;
      border-right-color:#ccc;
    }

ボーダー付ふきだし

ふきだし5

html

<div class="box5">
  <h3>タイトル</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

css

.box5{
      position: relative;
      padding:20px;
      background:#eee;
      width:540px;
      border:1px solid #aaa;
    }
    .box5:before,
    .box5:after{
      position: absolute;
      content:"";
      top:100%;
      left:60px;
      width:0;
      height:0;
      border:20px solid transparent;
      border-top-color:#aaa;
    }
    .box5:after{
      margin-left:1px;
      border-top-color:#eee;
      border-width:19px;
    }

吹き出しDEMO

シェアする

  • このエントリーをはてなブックマークに追加

フォローする