Display arrow head with CSS

I am trying to display an arrow head next to my content DIV.

Its should be something similar to this -

enter image description here

My problem is when I adding contents to DIV, I can not keep the arrow head vertically center of the content DIV.

This is my HTML and CSS

<div id="mybox"> <p></p> </div>
#mybox {
  width:200px;
  min-height:100px;
  background-color:green;
  position:relative;
}

#mybox:after {
  content:"";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  border-left: 20px solid #f00;
  width: 0;
  height: 0;
  right: -20px;
  top: 20px;
}

Can anybody tell me how can I fix this problem?

CSSDESK


solution

Since the height of the arrow is known, you can just use a top value of 50% and then a negative margin-top to displace the arrow’s height:

Example Here - works for dynamic content now.

#mybox:after {
  content:"";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  border-left: 20px solid #f00;
  width: 0;
  height: 0;
  right: -20px;
  top: 50%;
  margin-top: -20px;
}

Alternatively, if the arrow’s height isn’t known, you could use the following instead:

Example Here

#mybox:after {
  /* Other properties.. */
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}