by shigemk2

当面は技術的なことしか書かない

CSSで吹き出しを作ってみよう

CSS

普通に画像を仕込んでもよさそうなものですが、
敢えてCSSで吹き出しを作ることに挑戦してみた。

こんな感じのHTMLがあったとしましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="example2.css">
    <title>Hoge</title>
  </head>
  <body>
    <article class="hoge">
    <p>おはぎ</p>
    </article>
  </body>
</html>

そしてこのようなCSSを書きます。

article.hoge:before {
  content:"▲";
  font-weight: 500;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  color: #fff;
  background-color: #fff;
  margin-left: 97px;
  margin-top: 10px;
  text-shadow: -0.69px -1.5899999999999999px 0px #000000;
  z-index: 2;
}
article.hoge {
  width: 100px;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 0;
}

するとまあこんな風に吹き出しを作ることが出来るのです!!

ポイントは、
疑似要素:beforeと、contentを使って▲を書き出す。
背景色やフォント色は白にしつつ、text-shadowで影を出して吹き出しっぽくする。

margin-leftとtext-shadowの使いかたが少ししんどかったかな。

ちなみに、text-shadowは下、横、ぼかす距離、色の順番。

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);

これを用いて90度回転させます。
webkitがGoogleChrome mozがFirefox、oがOperaです。

id:tomoyaさん、弘兼憲史先生、ありがとうございました。