html - の一部に画像をオーバーレイ国境

Question

私は<div>制服を着ていますborder: 15px

jsfiddleはhttp://jsfiddle.net/user1212/e7Gez/2/です。

画像を左上部分に表示しようとしています<div>

しかし、既存のborderものはそれをブロックしています。

解決策はありますか？

Answer 1

このgifの画像pngを作成し、白を非表示にすることができれば、これが私の解決策です

クラスContainerのdivの上にこのPNGまたはGIFのImageタグを追加します

<img id="cornerLeft" src="http://smitra.net76.net/post-bg.jpg" />
<div class="content">
   Text Goes here
</div>

次に、スタイルについては、絶対位置を使用するだけで、コンテンツはその画像の下に配置されます。

#cornerLeft{
    position:absolute;
}

また、コンテンツクラスから画像のある背景を削除します

background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;

Answer 2

それが背景である必要があるかどうかはわかりませんが、これは私の試みです。

html

<div class="content">
    <img src="http://smitra.net76.net/post-bg.jpg" />
    Text Goes here
</div>​

css

img {
  position: relative;
  top: -15px;
  left: -15px;    
}

実際には背景である必要はないように見えますが、divのコーナーに何かありますか？