ayilmaz ayilmaz - 7 months ago 44
HTML Question

HTML div comment box with arrow

I am trying to create a comment box with an arrow. I am using the CSS, but I have a problem that I cannot solve.

I have a white background, and I need to make my comment box with a white background. So, to make the box visible to the users, I need to put a border to the box, but I don't know how to put the border to the arrow.

Here is my 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;
}


Here is the 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>


Here is the jsfiddle.

How can I make a border to the box like below?

Enter image description here

Answer

Here is my solution, jsfiddle. I hope everyone can get advantage of it.

.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>

Comments