CSS Message Box with Arrow Icon

A message box is a great way to interact with users on a webpage. It is used to notify the users about the action that he/she performs on a website. It can be an error, success, or an info message to guide the users. Mostly such messages are displayed in a popup box, but in some cases, it can be a static message box. In this tutorial, we’ll create a message box with an arrow icon using pure CSS.

As you have seen in the above image, this message box is just like a speech bubble that is displaying some text content. Actually, its an HTML div box that can show anything inside it. So, this arrow box can be used as a tooltip or in a tour guide message box.

The coding concept for this message box is really simple and straightforward. You just need to create a div element for a message box, then some CSS styles using CSS :before and :after pseudo-selector. So, let’s get started with HTML to build a message box.

The HTML Structure

First of all, create a div element with a class name “box” and add another class according to the position of the arrow. You can set the arrow to the top, left, right, or bottom of the message box. So, define the second class as “arrow-top” in order to display an arrow icon top of the message box.

<div class="box arrow-top">
  This is some example text for your message.
</div>

Similarly, the other positions of the arrow icon can be shown by defining the classes like below:

<div class="box arrow-top">
  This is a box with some content and an arrow at the top.
</div>

<div class="box arrow-right">
  This is a box with some content and an arrow on the right.
</div>

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

<div class="box arrow-left">
  This is a box with some content and an arrow on the left.
</div>

You can place any HTML element inside a box, like buttons, images, or anything you want.

CSS Styles for Message Box with Arrow

Now, its time to style the message box using CSS. Target the “.box” selector and define the width, height background, etc. Here the important thing is position property that you need to keep relative. The other properties such as margin and padding can be defined according to your needs.

.box {
  width: 180px;
  height: auto;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
}

After that, leave some space on the top of the box by defining the margin-top property. Then, use the CSS after pseudo selector .arrow-top:afterkeep its content blank, define its position as absolute, and set border property as mentioned below:

.box.arrow-top {
  margin-top: 40px;
}

.box.arrow-top:after {
  content: " ";
  position: absolute;
  right: 30px;
  top: -15px;
  border-top: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid black;
}

In order to display the arrow to the right, define the CSS styles for the .arrow-right selector just like below snippet:

.box.arrow-right:after {
  content: " ";
  position: absolute;
  right: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: none;
  border-left: 15px solid black;
  border-bottom: 15px solid transparent;
}

To display the arrow icon to the bottom of the box, just define none attribute for the border-bottom property.

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}

Similarly, use the “none” for border-left to set the arrow icon to the left of the box. You can increase/decrease the thickness of the arrow by changing the values of the border that is 15px respectively.

.box.arrow-left:after {
  content: " ";
  position: absolute;
  left: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: 15px solid black;
  border-left: none;
  border-bottom: 15px solid transparent;
}

Use the CSS media queries to make your message box responsive across various screen sizes.

@media only screen and (min-width:240px) and (max-width: 768px){
    .box{
        display: block;
        float: none;
        margin: 40px auto;
    }
}

That’s all! I hope, now you are able to create a message box with an arrow. If you have any questions or suggestions related to this message box, let me know by comment below.