CSS实现带箭头のDIV方框 <スタイル>
s{
位置:絶対;
トップ:-20ピクセル;
*上:-22px;
左:20ピクセル;
表示:ブロック;
高さ:0;
幅:0;
フォントサイズ: 0;
行の高さ: 0;
ボーダーカラー:透明透明 #666 透明;
ボーダースタイル:破線 破線 実線 破線;
ボーダー幅:10px;
}
div.container{位置:絶対;
トップ:30ピクセル;
左:40ピクセル;
フォントサイズ: 9pt;
表示:ブロック;
高さ:100ピクセル;
幅:200ピクセル;
背景色:透明;
*ボーダー:1px ソリッド #666;
}
i{位置:絶対;
トップ:-9px;
*上:-9px;
左:-10px;
表示:ブロック;
高さ:0;
幅:0;
フォントサイズ: 0;
行の高さ: 0;
ボーダーカラー:透明透明 #fff 透明;
ボーダースタイル:破線 破線 実線 破線;
ボーダー幅:10px;
}
.content{
border:1px ソリッド #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
位置:絶対;
背景色:#fff;
幅:100%;
高さ:100%;
パディング:5px;
*上:-2px;
*border-top:1px ソリッド #666;
*border-top:1px ソリッド #666;
*左境界線:なし;
*ボーダー右:なし;
*高さ:102ピクセル;
ボックスシャドウ: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
//互換性、考慮虑6及以前のバージョンの表
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* IE 8 の場合 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}