CSS: How to attach an arrow to a div and make it overlap the border

Question

I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.

Answer 1

Easiest way:

HTML:

CSS:

.meow { 
  height: 100px;
  width: 300px;
  margin: 30px;
  background: linear-gradient(#333, #222);
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.meow:after {
  content: " ";
  border-top: 11px solid #222;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  position: relative;
  top: 111px;
  right: -140px;
}

Live preview: CodePen.io

Just do some few edits.