Add an Angled left Border to search icon

enter image description here

I’m trying to achieve this:

and so far I’ve managed to get the top, right, and bottom sorted (https://diviplayground.com/) but now I’m struggling to figure out how to do the left side of the box. I’ve tried the following CSS:

#et_top_search:before {
content: '';
border-style: solid;
border-width: 2px;
border: #FFCC29;
transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);

}

Can anybody help me in the right direction? Still finding my feet with the more complex part of CSS.

Many thanks,

Rob

Read more here: Add an Angled left Border to search icon

Leave a Reply

Your email address will not be published. Required fields are marked *