CSS3:フキダシを作る

まず表示サンプルはこちら。
http://jsdo.it/goto_jp/awLv

HTMLは下記のようにごくシンプルに。

<div class="fukidashi">ふきだしです。</div>

CSSは下記になります。

.fukidashi {
  background:#999;
  color:#fff;
  width:200px;
  margin:20px auto;
  border-radius:10px;
  padding:20px;
  position:relative;
}
.fukidashi:after {
  display:block;
  content:"";
  background:#999;
  width:10px;
  height:10px;
  position:absolute;
  bottom:-5px;
  left:20px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
}

「:after」セレクタを使ってdivの後にcontentで実体の箱をひとつ作り、transformで45度回転させて、absoluteで位置調整するというのがタネです。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。