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 -
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>
Can anybody tell me how can I fix this problem?
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.
Alternatively, if the arrow’s height isn’t known, you could use the following instead: