花式注释块CSS实现

Question

的目标是实现这一点：

我已经知道如何裁剪我的图片，但真的比较容易的部分。我有一个关于在一个圆形块上重叠图像的顶部（短评）实现的粗略想法，添加了一些左填充和一个负溢出隐藏溢出的左边界，并且瞧。但是，如果内容扩展，那就行了，因为这些是评论块，它们将会扩展。

1）虚线框表示将显示内容的区域。底部图像（长评论）显示填充图像下方额外空间的内容，类似于float的工作方式。然而，如果这太难实现，我可以接受一个直的矩形形状的内容和图像下方的空白空间。

2）这些箱子的宽度和高度均可扩展至最小宽度/最小高度150px/90px。

3）我不在乎它们是否因为边界半径而在IE中出现90度角。这就是IE如何使用border-radius显示我网站的其余部分（9除外）。

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

Answer 1

我的最终版本： 演示http://dabblet.com/gist/3149345

HTML结构（IE9 +，歌剧10.5+，铬，FF，Safari浏览器的作品）：

<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上使用了两个伪元素。我给它们的宽度和高度都等于用于.comment（在这种情况下为20px）的border-radius。我也给他们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; 
} 

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