I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge.
My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with adding the border to the arrow element itself.
This is the CSS code I have so far:
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;
}
And here's the corresponding HTML code:
<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>
You can also see the result on jsfiddle.
How can I achieve adding a border to the entire box like the example below?