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

3

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

于 2013-04-25T15:02:38.730 回答
2

该站点提供了一种非常简单的方式来为您生成 CSS。只需选择您想要箭头在哪一侧，然后创建 CSS。

http://www.cssarrowplease.com/

于 2017-10-23T18:43:27.160 回答
1

如果你乐于只支持现代浏览器，你可以使用 CSS3 的 psuedo::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 回答
-2

一种简单的方法是将盒子制作为图像。将其用作背景图像，并留有一点边距，以便文本在框内。

于 2013-04-25T14:41:28.120 回答