CSS3 Search Shape

CSS Shapes:

Search Symbol: 

 /*Circle syles*/

#search  {                              

                                 border: 5px solid #56276a; /*circle border and color*/

                                 border-radius:50%; /*circle border radius*/

                                 width: 50px; /*circle width*/

                                 height: 50px;  /*circle height*/

                                 position: relative; /*circle position*/

                             }

/*circle handle styles*/

                             #search:before{

                                 content: "";

                                 width: 5px;

                                 height: 40px;

                                 background:#56276a;

                                 position: absolute;

                                 right: -7px;  /* line right */

                                 bottom: -30px; /* line bottom */

                                transform: rotate(145deg);  /* line rotation */

                                 -webkit-transform: rotate(145deg);

                                 -moz-transform: rotate(145deg);

                                 -ms-transform: rotate(145deg);

                                 -o-transform: rotate(145deg);

                             }

<div id="search">            

         </div>