CSS3で三角形の描画にシャドウをつけると

質問

CSS3で三角形を作って、シャドウをつけると
三角の下に四角い影がついてしまうのですが、これはどうにもならないのでしょうか？
"▲"の下に"□"こんな感じで影が付きます。

ソースは以下のとおりです。

width: 0; height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
-moz-box-shadow:0 0 3px #cccccc;
-webkit-box-shadow:0 0 3px #cccccc;
box-shadow:0 0 3px #cccccc;

アドバイスお願いします。

回答No.1

karita_83 · ベストアンサー

はじめまして。

自分はｃｓｓ3で三角とか書いたことがないので、
すごいなと関心してしまいました。

ということでちょっと調べてみたのですが、
影をつけるときにも、おそらく
△を表現しているものだとしても、要素としては四角いので、
その要素であるボックスに影をつける、という指定をするのでは、四角の影がついてしまうようですね。

なので、影っぽい色で外側の必要な部分にもうひとつ△を書くのはいかがでしょうか？
グラデーションで書くための記述もあるようです。

以下ＵＲＬを参考にしてお返事させていただきました。
直接の回答ではなく申し訳ございません。

http://re-dzine.net/2010/06/iphone4-css3-explanation-1st/
iPhone4をcss3で書いてみた

http://webdesignrecipes.com/spice-up-web-design-with-css3/
CSS3の表現でデザインをちょっと素敵にするサンプル 8

一応回答をさせていただいている側なのですが
大変勉強になりました。ありがとうございます。

お礼

ありがとうございました！
もうひとつ△を作ってグラデーションをかけるのは思いつきませんでした！！
発想が出てくるのがすごいです！目からウロコでした。
やってみますv
参考サイトのURLまでありがとうございます！

自分もまだまだ勉強中です。
CSS3まだまだPCブラウザでは実用的じゃないのかもしれないのですが
スマートフォンだとかなり対応しているみたいなので、勉強してみようと思いまして；