Display arrow head with CSS

Question

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

Its should be something similar to this -

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

Thank you.

Answer 1

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%);
}

Answer 2

http://jsfiddle.net/9k9Gu/

use

top:50%;
margin:-20px 0 0 0;