logo标签列表

带有箭头的HTML div评论框

csshtml
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。
如何像下面这样给框添加边框？ Enter image description here
5个回答
4

这是我的解决方案，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>

解释你的方法并附上一些评论会更好 - snajahi
2
这个网站提供了一种非常简单的方法来生成CSS代码。只需要选择您想要箭头出现的位置，CSS代码就会自动生成。 http://www.cssarrowplease.com/
这是最好的答案。 - Chif
1
我从未使用过那个。我会研究一下。 - Arif YILMAZ
但我需要箭头向左。 - Arif YILMAZ
@Borsel 这应该很容易更改。我已经提供了逻辑。 - Curtis
1

另外您可以查看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 -->
-2
一个简单的方法是将盒子制作成图像。将其用作背景图像，并留出一点 margin-left，以便文本位于盒子内部。
我想过这个，但我想用真正的CSS来实现它。 - Arif YILMAZ
为什么？这只会使代码变得更加复杂，如果您的图像不是很大（10ko对于它来说是巨大的），它根本不会影响性能。 - wazaminator
我完全同意@wazaminator的观点。在CSS中做这种事情没有任何用处。它不支持旧版浏览器，而且比一个图像更加复杂。 - DiederikEEn
2
-1 我不同意。对于这么简单的东西，你不应该需要一个图像。为了旧浏览器，你正在添加额外的HTTP请求并限制文本大小增加。我宁愿在新浏览器中使用新技术，而不是因为一些用户继续使用旧软件而被困在过去。最多只能使用现代化技术作为后备，例如modernizr等。即使这样，为什么要将整个框都做成一个图像？你可以只将箭头做成一个图像。 - Curtis
@Curt，我已经做好了并放在 Fiddle 上了。你介意检查一下吗？ - Arif YILMAZ
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接