css 实现元素四角图片样式，元素的大小不定

demo

效果

css

 body {
            margin: 0;
        }
        .popup p{
            margin-bottom:20px;
            margin-left:200px;
            }
        .popup p span{
            display: inline-block;
        }
        .popup p span.popup-a{
            padding-left:6px;
            background: url("images/1.gif") no-repeat;

        }
        .popup p span.popup-b{
            background: url("images/1.gif") right top no-repeat;
        }
        .popup p span.popup-c{
            background: url("images/1.gif") -6px bottom no-repeat;

        }
        .popup p span.popup-d{
            padding:10px 6px;
            background: url("images/1.gif") right bottom;

        }

html

<div class="popup">
    <p><span class="popup-a"><span class="popup-b"><span class="popup-c"><span class="popup-d">我发出的消息</span></span></span></span></p>
    <p><span class="popup-a"><span class="popup-b"><span class="popup-c"><span class="popup-d">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span></span></span></p>
    <p><span class="popup-a"><span class="popup-b"><span class="popup-c"><span class="popup-d">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span></span></span></p>
    <p><span class="popup-a"><span class="popup-b"><span class="popup-c"><span class="popup-d">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span></span></span></p>
</div>

素材：

简化背景图片

效果

css

 .popup1 .popup1-0{
            margin-left:200px;
            position: relative;
            border: 1px solid #d2d2d2;
        }
        .popup1  span{
            display: inline-block;
        }
        .popup1 .popup1-0{
            margin-bottom:20px;
        }
        .popup1 .popup1-0 span.popup-a{
            width:10px;
            height:15px;
            position: absolute;
            top:-1px;
            left:-7px;
            background: #fff url("images/2.gif") left top no-repeat;

        }
        .popup1 .popup1-0 span.popup-b{
            width:7px;
            height:4px;
            position: absolute;
            top:-1px;
            right:-1px;
            background: url("images/2.gif") right top no-repeat;
        }
        .popup1 .popup1-0 span.popup-c{
            width:6px;
            height:5px;
            position: absolute;
            bottom:-1px;
            right:-1px;
            background: url("images/2.gif") right bottom no-repeat;

        }
        .popup1 .popup1-0 span.popup-d{
            width:13px;
            height:5px;
            position: absolute;
            bottom:-1px;
            left:-7px;
            background: url("images/2.gif") left bottom no-repeat;
        }
        .popup1 .popup1-0 span.popup-body{
            margin:4px 0;
            padding: 8px 4px;
            background-color: #f5f5f5;
            border-top: 5px solid #f9f9f9;
            border-bottom: 2px solid #f8f8f8;
        }

html

<div class="popup1">
    <span class="popup1-0"><span class="popup-a"></span><span class="popup-b"></span><span class="popup-c"></span><span class="popup-d"></span><span class="popup-body">我发出的消息</span></span>
    <span class="popup1-0"><span class="popup-a"></span><span class="popup-b"></span><span class="popup-c"></span><span class="popup-d"></span><span class="popup-body">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span>
    <span class="popup1-0"><span class="popup-a"></span><span class="popup-b"></span><span class="popup-c"></span><span class="popup-d"></span><span class="popup-body">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span>
    <span class="popup1-0"><span class="popup-a"></span><span class="popup-b"></span><span class="popup-c"></span><span class="popup-d"></span><span class="popup-body">我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息，我发出的消息</span></span>
</div>

总结来自：http://www.zhangxinxu.com/wordpress/2009/09/%E6%90%9C%E7%8B%90%E7%99%BD%E7%A4%BE%E4%BC%9Apopup%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%A0%B7%E5%BC%8F%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0%E7%9A%84%E4%BC%98%E5%8C%96/