Pure Html/css To Create Triangle Pointer Under Button

Currently I have a div that looks like this: I need to edit the HTML/CSS so that it displays like this with a small triangle underneath. Ideally, I would like to do this using pur

Solution 1:

Generate your own div with an arrow at http://cssarrowplease.com/

You can configure it like you want and become a clean CSS

---

How it works: Lets' create a very simple triangle with this technique:

.container {
  position: relative;
  display: block;
  width: 120px;
  height: 50px;
  background: blue;
}

.container:after{
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
  left: 50%;
  border: 40px solid transparent;
  border-bottom-color: red;
  content: "";
}

<divclass="container"></div>

The important thing is height: 0; & width: 0 of the pseudo-element where we apply the border. So you can imagine an element of no size. And this is the origin of the border. So each side of the border is a triangle (try colorize each side in a different color to understand it). So to create the "single triangle" effect, just apply a transparent color to the border and colorize the triangle you want to display.

---

Alternative: CSS Clip-Path

You can create a rectangle now very easy with the new clip-path with CSS. Just watch out for the browser-support. As usual, IE & sadly Edge both won't support it as well as Opera Mini: Can I Use

Quick Example:

.new_way {
  position: relative;
  margin: 100px auto;
  background: #88b7d5;
  width: 100px;
  padding: 20px;
  text-align: center;
}

.new_way::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 10px);
  background: #88b7d5;
  width: 20px;
  height: 20px;
  
  /* The points are: (left top: x y, right top: x y, center bottom: x y) */clip-path: polygon(00, 100%0, 50%100%);
}

<divclass="new_way">
  Clip Path
</div>

So now you only need 1 line. Nice, isn't it?

Solution 2:

This is called "callout".

Here are some examples:

http://cssdeck.com/labs/bv45bh6p (some examples)

http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ (with explanation of how it works)