html - Positioning div with arrow in bootstrap form field -

I'm trying to create a div position with an arrow in the bootstrap form field, but pointing at the arrow next Here's my code pointing to the line:

  & lt; H3 & gt; Rregistration & lt; / H3 & gt; & Lt; Div class = "control-group" & gt; & Lt; = "InputName" for label class = "control-label" & gt; Name & lt; / Label & gt; & Lt; Div class = "control" & gt; & Lt; Input type = "text" id = "inputName" placeholder = "name" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "container" & gt; & Lt; Div id = "pointer" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 and css  
 . Container {margin-top: 10px; Body {background: # ff004e; Padding: 40px}. Container {background: white; -WebKit-boundary-radius: 10px; -image-radius: 10px; Range radius: 10px; Width: 250px; Height: 100px; Display area; Status: Relative; } # Indicator (border-right: solid 20px #FFF; / * border-left: solid 5px transparent; * / border-top: solid 10px transparent; bottom border: solid 10px transparent; position: full; width: 0; height: 0; top: 10px; left: -20px}   
 JSFDial link is here:   
 
 
  
  
 Rregistration  & lt; div class = " = "InputName" & gt; name & lt; / label & gt; & lt; div class = "control" & gt; & lt for "control-group" & gt; label class = "control-label" ; Input type = "text" id = "InputName" placeholder = "name" style = "float: left"> gt; div class = "span3"> gt; id id = "pointer" & gt; & lt; / div & gt; & Lt; / div & gt; & lt; / div & gt; & lt; / div & gt; Body {background: # FF004e; padding: 40px} .SPN3 {background: white; -webkit-border- Radius: 10px; -mobile-radius: 10px; boundary-radius: 10px; width: 250px; height: 100px; display area; position: relative; }