how can i create text box with side arrow?

wow! Thank you very much.

Use the below HTML/CSS to create it,

HTML

<p>
  <input type="text" />
  
</p>
<div id="pointer"></div>

CSS

body {background:#ff004e;padding:40px}

p {background:white; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; width:250px; height:50px}

p input{
  border:none;line-height:50px; padding:0px 10px;
}

#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-35px 0 0 -20px;}

Output :

Let me know if this works for you, thanks

Another example (just place textbox code instead of text, in between), if needed

Codepen

Bubbly