花式註釋塊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