带有箭头的HTML div评论框

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。

如何在下面的框中制作边框？

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

一个简单的方法来做到这一点是使箱为图像。将它用作背景图片，并留下一点余量，以便文本位于框内。

Answer 3

如果您很高兴只支持现代浏览器，则可以使用CSS3的伪元素::before元素。

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

Answer 4

或者你可以看看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 5

本网站提供了一种非常简单的方法来为您生成CSS。只需选择你想要的箭头，并创建CSS。

http://www.cssarrowplease.com/