帶有箭頭的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/