Question

我正在尝试使用箭头创建评论框。我正在使用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。

如何在下面的方框中创建边框？

Enter image description here

Answer 1

以下是我的解决方案jsfiddle。我希望每个人都可以利用它。

.left {
    width: 920px !important;
    padding-bottom: 40px;
    min-height: auto !important;
    padding-right: 0;
    float: left;
}

.left > p:first-of-type {
    background: #ffd987;
    font-style: italic;
    padding: 5px 10px;
    margin-bottom: 40px;
}

.tip {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 1.2em;
    position: relative;
    width: 200px;
}

.tip:before {
    position: absolute;
    top: -14px;
    left: 98px;
    display: inline-block;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #fff;
    border-left: 14px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.tip:after {
    position: absolute;
    top: -12px;
    left: 99px;
    display: inline-block;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff;
    border-left: 12px solid transparent;
    content: '';
}

.tip.left:before {
    border-top: 14px solid transparent;
    border-right: 14px solid #fff;
    border-bottom: 14px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.2);
    left: -28px;
    top: 20px;
}

.tip.left:after {
    border-top: 12px solid transparent;
    border-right: 12px solid #fff;
    border-bottom: 12px solid transparent;
    left: -24px;
    top: 22px;
}

<div style="padding:50px">

<div class="tip left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam a sapien egestas eget scelerisque lectus tempor. Duis placerat tellus at erat pellentesque nec ultricies erat molestie. Integer nec orci id tortor molestie porta. Suspendisse eu sagittis quam.
</div>

Answer 2

如果您乐意仅支持现代浏览器，则可以使用CSS3的伪::before元素。

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

Answer 3

或者，您可以查看this页面。

<!-- 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 -->

Answer 4

此站点提供了一种为您生成CSS的简单方法。只需选择您想要箭头的那一侧并创建CSS。

http://www.cssarrowplease.com/

Answer 5

一种简单的方法是将盒子作为图像。将它用作背景图像，并留下一点边距，使文本在框内。

带有箭头的HTML div注释框

5 个答案: