花哨的评论阻止CSS实现

Question

目标是实现这一目标：

我已经知道如何裁剪我的图像，但这真的很容易。关于在圆形块上重叠图像的顶部（简短评论）实现，我有一个粗略的想法，添加一些左边距和左边距为溢出隐藏和瞧。但是，如果内容扩展，这确实有效，并且由于这些是注释块，它们将会扩展。

1）虚线框表示将显示内容的区域。底部图像（长注释）显示填充图像下方额外空间的内容，类似于浮点的工作方式。但是，如果这太难实现，我可以接受直的矩形形状的内容，只是图像下的空白空间。

2）盒子的宽度和高度都可以扩展到最小宽度/最小高度150px / 90px。

3）由于边界半径，我不在乎它们在IE中是否呈现90度角。这就是IE使用border-radius（除了9）显示我网站其余部分的方式。

4）我也可以接受jQuery。目前我正在使用1.7.2，我的网站非常简单，所以我不介意添加更多的脚本。

Answer 1

我的最终版本： 演示http://dabblet.com/gist/3149345（适用于IE9 +，Opera 10.5 +，Chrome，FF，Safari）

HTML结构：

<div class="comment b">
    <a href="#" class="img-wrapper"><img src=""></a>
    <div class="comment-content">
        <p><!--a lot of text here--></p>
    </div>
</div>

首先，我将.img-wrapper向左浮动，给它一个白色背景加右上角和右下角半径50%。然后它上面的图像有黑色背景。

然后我在.comment上使用了两个伪元素。我给它们的宽度和高度都等于用于border-radius的{​​{1}}（在这种情况下为.comment）。我还给他们20px并将他们的position: absolute值设置为等于top的高度（在这种情况下为.img-wrapper）。

我为130px元素提供白色背景，:before元素为黑色背景。我还为:after元素提供了一个100％左上角:after，以便在图像包装器下实现相同的圆角效果。

border-radius

Answer 2

我试图实现它，这就是结果：

HTML：

<div class="comment">
    <div class="img"><div class="inner">img</div></div>
    <p>This is the comment</p>
</div>
<div class="comment">
   <div class="img"><div class="inner">img</div></div>
   <p>Long comment. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>​

CSS：

.comment {
    background-color: #000;
    border-radius: 20px;
    color: #fff;
    overflow: auto;
    margin-bottom: 10px;
    padding: 20px 20px 0;
}
.comment .img {
    background-color: #fff;
    border-radius: 0 60px 60px 0;
    border: 5px solid #fff;
    display: block;
    float: left;
    margin: -20px 20px 0 -20px;
}
.comment .img .inner {
    background: #000;
    border-radius: 60px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.comment p {
    padding-bottom: 20px;
}

点击此处观看演示：Demo