Input con flecha

by Martin Miranda

HTML

<div id="content">
    <input class="caja" type="email" placeholder="Ej.:[email protected]" pattern="/d/d/d - /d/d/d" />
</div>
<div id="content2">
    <input class="caja" type="email" placeholder="Ej.:[email protected]" pattern="/d/d/d - /d/d/d" />
</div>
<div id="content3">
    <input class="caja" type="email" placeholder="Ej.:[email protected]" pattern="/d/d/d - /d/d/d" />
</div>

CSS

body,html{
    width:100%;
    height:100%;
    background-color:rgba(200,200,200,.5);
}
input{
    box-sizing:border-box;
}
#content{
    width:270px;
    height:60px;
    background-color:white;
    margin:0 auto;
    top:70px;
    right:0;
    bottom:0;
    left:0;
    position:relative;
}
#content:before{
    content:"";
    width:0;
    height:0;
    border-bottom:30px solid white;
    border-right:15px solid transparent;
    border-left:15px solid transparent;
    position:absolute;
    top:-20px;
}
#content2{
    width:270px;
    height:60px;
    background-color:white;
    margin:0 auto;
    top:100px;
    right:0;
    bottom:0;
    left:0;
    position:relative;
    border-radius:15px;
    box-shadow:0px 5px 0px 0px rgba(0,0,0,.2);
}
#content2:before{
    content:"";
    width:0;
    height:0;
    border-bottom:30px solid white;
    border-right:15px solid transparent;
    border-left:15px solid transparent;
    position:absolute;
    top:-20px;
}
#content3{
    width:270px;
    height:60px;
    background-color:white;
    margin:0 auto;
    top:150px;
    right:0;
    bottom:0;
    left:0;
    position:relative;
    border:3px solid rgba(10,220,250,1);
    z-index:99;
}
#content3:before{
    content:"";
    width:0;
    height:0;
    border-bottom:20px solid rgba(10,220,250,1);;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
    position:absolute;
    top:-20px;
    z-index:1;
}
.caja{
    width:95%;
    height:50px;
    border:none;
    border-radius:10px;
    position:absolute;
    padding:0 15px;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-family:Arial;
}