css - 带有箭头的 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>