Show arrow using CSS

Question

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

Its supposed to be something like this -

My problem is that when I add content to a DIV, I cannot keep the arrow head vertically in the center of the DIV content.

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 someone tell me how can I fix this problem?

CSSDESK

Thank.

Answer 1

Since the height of the arrow is known, you can simply use a value top 50%and then negative margin-topto offset the height of the arrow:

An example here is now working for dynamic content.

#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 height of the arrow is unknown, you can use the following:

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

Answer 2

http://jsfiddle.net/9k9Gu/

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

Answer 3

Display an arrow before a div is executed using two-way mode, or you can create two divs, either a user :beforeor :aftera div

take this example

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f3f300;
  margin-left: 60px;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%);
}

.big-reward {
  background-color: #faf300;
  padding: 10px;
  text-align: justify;
  width: 100px;
  margin-left: 0;
  color: #e21111;
}

<div>
  $452
</div>
<div class="arrow-up"></div>
<div class="big-reward" id="mybox"><span><strong>Big Reward!</strong> Here is a sample text.</span></div>

Run code

Hey also check this jsfiddle link

Link: W3CodeSchool.com