How to remove pseudo-element boundaries? While pseudo-element without a border all norms

.btn-arrow { display: inline-block; position: relative; background: linear-gradient(to top ,#a40202,#f73b3b); color: #fff; margin-left: 120px; height: 85px; width: 101px; text-decoration: none; padding-top: 5px; border-top:1px solid #bf3a3a; border-bottom: 1px solid #fe5858; border-right: 1px solid #bf3a3a; z-index: 1000; } .btn-arrow i.flaticon-shopping109 { z-index: 1; font-size: 70px; margin-left: 10px; color:#481214; text-shadow:0px 1px 0px #ff6c66; } .btn-arrow:before { content:''; position: absolute; left: -25px; top: 51%; background:linear-gradient(to top left,#a40202,#f73b3b); width: 50px; height: 38px; margin-top: -20px; z-index: 1; transform:rotate(65deg) skewX(40deg); border-bottom: 1px solid #fe5858; border-left:1px solid #bf3a3a; } 
 <a href="#" class="btn-arrow" id="f_default"> <i class="flaticon-shopping109"></i> </a>

    5 answers 5

     <html><head> <style> </style> </head> <body> <style> .btn-arrow { display: inline-block; position: relative; background: linear-gradient(to top ,#a40202,#f73b3b); color: #fff; margin-left: 120px; height: 85px; width: 101px; text-decoration: none; padding-top: 5px; border-top:1px solid #bf3a3a; border-right: 1px solid #bf3a3a; z-index: 1000; } .btn-arrow i.flaticon-shopping109 { z-index: 1; font-size: 70px; margin-left: 10px; color:#481214; text-shadow:0px 1px 0px #ff6c66; } .btn-arrow:before { content:''; position: absolute; left: -25px; top: 51%; background:linear-gradient(to top left,#a40202,#f73b3b); width: 50px; height: 38px; margin-top: -20px; z-index: 1; transform:rotate(65deg) skewX(40deg); } </style> <a href="#" class="btn-arrow" id="f_default"> <i class="flaticon-shopping109"></i> </a> <script type="text/javascript"> </script> <script type="text/javascript"> </script> </body></html>

    • so I need these boarders)) - Denis
    • Is the issue resolved or? I can not understand you. make a screen in the point that you need to specify - Lyubov Dalobaeva
     border-bottom: 0px solid #fe5858; border-left:0px solid #bf3a3a
    • I'm not talking about the boarders spoke. There is a barely noticeable 1-pixel outline of the contour of the object. - Denis
    • link to site give or download code - Lyubov Dalobaeva

    Try setting outline: 0px none;

      No This Chrome so draws a little inaccurate. Or, there full pixels turn out. You can try to pick values ​​to get better.

         <!DOCTYPE html> <html> <head> <style> .btn-arrow { display: inline-block; position: relative; background: linear-gradient(to top ,#a40202,#f73b3b); color: #fff; margin-left: 120px; height: 85px; width: 101px; text-decoration: none; padding-top: 5px; border-top:1px solid #bf3a3a; border-right: 1px solid #bf3a3a; z-index: 1000; } .btn-arrow i.flaticon-shopping109 { z-index: 1; font-size: 70px; margin-left: 10px; color:#481214; text-shadow:0px 1px 0px #ff6c66; } .btn-arrow:before { content:''; position: absolute; left: -25px; top: 51%; background:linear-gradient(to top left,#a40202,#f73b3b); width: 50px; height: 38px; margin-top: -20px; z-index: 1; transform:rotate(65deg) skewX(40deg); border-left:1px solid #bf3a3a; } </style> </head> <body> <a href="#" class="btn-arrow" id="f_default"> <i class="flaticon-shopping109"></i> </a> <script type="text/javascript"> </script> </body> </html>