3

矢印付きのコメント ボックスを作成しようとしています。CSS を使用していますが、解決できない問題があります。

背景が白なので、コメント ボックスを白の背景にする必要があります。したがって、ボックスをユーザーに表示するには、ボックスに境界線を付ける必要がありますが、境界線を矢印に配置する方法がわかりません。

ここに私のCSSがあります:

body {background: grey;padding: 40px}

.comment_div {
    background: white;
    width: 250px;
    padding: 10px;
    display: block;
}

.pointer {
    border: solid 20px transparent;
    border-right-color: #fff;
    position: absolute;
    margin: 40px 0 0 -38px;
    z-index: 999;
}

HTMLは次のとおりです。

<div class="pointer"></div>
<div class="comment_div">
    test testtest testtest testtest testtest testtest testtest test
    test testtest testtest testtest testtest testtest testtest test
    test testtest testtest testtest testtest testtest testtest test
    test testtest testtest testtest testtest testtest testtest test
</div>

ここにjsfiddleがあります。

以下のようにボックスに境界線を作成するにはどうすればよいですか?

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

4

5 に答える 5

1

最新のブラウザーのみをサポートすることに満足している場合は、CSS3 の puedo::before要素を使用できます。

http://jsfiddle.net/26Lww/177/

于 2013-04-25T14:44:11.840 に答える
1

または、このページをご覧になることもできます。

<!-- DC Comment Boxes Start -->
<div class="tsc_clean_comment">
  <div class="avatar_box"> <img src="http://pimg.co/p/52x52" alt="Avatar" class="avatar" />
    <p class="username">Joe Blogs</p>
  </div>
  <div class="comment_box fr">
    <p class="comment_paragraph" contenteditable="true">This field is completely editable. To disable this feature remove the "contenteditable=true" tag from this code.</p>
    <a href="#" class="reply">Reply</a> <span class="date">1st January 2020</span> </div>
  <div class="tsc_clear"></div>
</div>
<!-- DC Comment Boxes End -->
于 2015-07-19T12:46:53.120 に答える