Display arrow head with CSS

css, html

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

Problem

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.

Original source