サンプルを作ってみました。
http://jsfiddle.net/JWwU4/
ぼくも作ってみました。
http://jsfiddle.net/czqVb/
Result の幅を広げて確認してみてください。
ポイントは、矢印の右はじだけ画像にしてて、矢印の中身が透明色で、矢印の外側に背景色を塗ってます。
CSS3対応ブラウザが必要ですが、こんな感じでどうでしょう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> td.arrow { height: 80px; background: lightblue; position: relative; } td.arrow:after { content:""; position: absolute; left: 100%; top: 0px; border-top: 40px solid transparent; border-left: 20px solid lightblue; border-bottom: 40px solid transparent; } td.space { height: 80px; width: 20px; position: relative; } </style> </head> <body> <table> <tr> <td class="arrow">あいうえお</td> <td class="space"></td> <td class="arrow">ABCD</td> <td class="space"></td> </tr> </table> </body> </html>
▽4
●
Lhankor_Mhy ●300ポイント ベストアンサー |
おのれ、a-kuma3め!
新しくサンプル作ってみました!画像なし!
http://jsfiddle.net/mTxCC/