花哨的注释块 CSS 实现

Question

我们的目标是实现这一目标：

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

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

2) 框的宽度和高度均可扩展至 150px/90px 的最小宽度/最小高度。

3) 我不在乎它们是否因为边框半径而在 IE 中显示为 90 度角。这就是 IE 使用边框半径显示我网站其余部分的方式（9 除外）。

4) 我也可以接受 jQuery。目前我使用的是 1.7.2，而且我的网站对它很轻，所以我不介意添加更多脚本。

Answer 1

我尝试实现它，结果是这样的：

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

Answer 2

我的最终版本： 演示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 用于.comment（在这种情况下为20px）。我还给他们position: absolute 并将他们的top 值设置为等于.img-wrapper 的高度（在这种情况下为130px）。

我给:before 元素一个白色背景，给:after 元素一个黑色背景。我还将:after 元素设置为左上角的 100% border-radius，以便在图像包装下也能实现相同的圆角效果。

.comment {
    width: 500px;
    border-radius: 20px;
    padding:20px;
    margin: 5% auto;
    position: relative;
    background: #000;
    color: #fff;
}
.a {
    height: 90px;
}
.b:before, .b:after {
    top: 130px;
    left: 0;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    content: '';
}
.b:before {
    background: #fff;
}
.b:after {
    border-radius: 100% 0 0 0;
    background: #000;
}
.img-wrapper {
    width: 130px;
    height: 130px;
    border-radius: 0 50% 50% 0;
    margin: -20px 20px 20px -20px;
    float: left;
    background: #fff;
}
.img-wrapper img {
    width: 120px;
    height: 120px;
    margin: 5px;
    border-radius: 50%;
    background: #000;
}