cssだけで影のみの吹き出しをつくる

box-shadow は四角形じゃないとうまく影を設定できません。
なので吹き出し部分を filter: drop-shadow で書くことで実現しています。

現時点ではIE以外は対応しているようなので、スマホなどでは使えるかと思います。




box-shadow はこんな感じで書くことができます。
水平方向の影の距離、垂直方向の影の距離、ぼかし（負の値は使えない）、広がり（拡大、縮小）、rgbaは色と透過、insetは内側に変更。

filter: drop-shadow は、insetは対応してないようです。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

See the Pen cssだけで影のみの吹き出しをつくる by takapen (@takapen) on CodePen.

html

test

css

p {
  width: 100px;
  padding: 8px 0;
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-radius: 4px;
  position: absolute;
}
p:before {
  content: "";
  border-right: 15px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 15px solid transparent;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, 0);
  filter: drop-shadow(0px -2px 8px rgba(0,0,0,0.3));
}
p:after {
  content: "";
  width: 40px;
  height: 10px;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  background: #fff;
}