Arrow Box with CSS

Question

How can I make this box in CSS?

I\'ve seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable.

Answer 1

Here is the solution I created

There are 2 simple ways to do this. The first, less efficient way is to have 2 elements. I take advantage of the :after pseudo element. I used position:absolute on the :after for 2 reasons.

1. You can place the element where you need to
2. It prevents the end of the triangle from being cut off

The key to creating the triangle is using the border property. You have 2 borders with the color of transparent set. These 2 borders are opposite of the direction you want to go. So if you want to make a right triangle, then use top and bottom. What gives the arrow it's shape is the last border. It also goes in the opposite direction. So for a right triangle, you would use border-left with a color. To get this to be the proper height, you must do half of the height of the box you want to place it on