3

目标是实现这一点：

在此处输入图像描述

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

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

2) 盒子的宽度和高度都可扩展至 150px/90px 的最小宽度/最小高度。

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

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

4

2 回答 2

6

我的最终版本：演示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;
}
于 2012-07-20T06:54:24.873 回答
5

我试图实现它，结果如下：

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

于 2012-07-20T06:48:39.020 回答