3

目標はこれを達成することです：

ここに画像の説明を入力してください

画像を切り抜く方法はすでに知っていますが、それは本当に簡単な部分です。丸みを帯びたブロックで画像をオーバーラップし、左のパディングと負の左マージンを追加し、オーバーフローを非表示にして出来上がりにすることに関して、上部（短いコメント）の実装について大まかなアイデアがあります。ただし、コンテンツが拡張された場合は機能します。これらはコメントブロックであるため、拡張されます。

1）破線のボックスは、コンテンツが表示される領域を表します。下の画像（長いコメント）は、floatがどのように機能するかと同様に、画像の下の余分なスペースを埋めるコンテンツを示しています。ただし、これを実装するのが難しすぎる場合は、コンテンツにまっすぐな長方形を受け入れ、画像の下のスペースを空にすることができます。

2）ボックスは、幅と高さの両方で150px/90pxの最小幅/最小高さに拡張可能です。

3）境界半径のため、IEで90度の角度として表示されるかどうかは気にしません。これが、IEがborder-radius（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%ます。そして、その上の画像には黒い背景があります。

次に、 で 2 つの疑似要素を使用し.commentます。幅と高さの両方を(この場合) にborder-radius使用されるものと同じにします。また、それらの値を(この場合は )の高さに等しくなるように設定します。.comment20pxposition: absolutetop.img-wrapper130px

: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 に答える