Zigzag footer change triangle color

Question

I have a footer and im trying to do it with a zigzag border, it working properly but i want to change the color of the triangle to this color #67BA4D, how can i do that? here is my code:

 .BottomFooter { position: relative; background-color: #67BA4D; margin-top: 20px; padding-top: 50px; padding-bottom: 30px; } .BottomFooter:before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 4px; /* red up pointing triangle */ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E"); } 

 <div class="BottomFooter"> <div class="row"> <div class="col-lg-6 col-xs-6"> <p> © 2017</p> <a href="#"></a> </div> <div class="col-lg-6 col-xs-6"> <ul class="list-unstyled list-inline"> <li><a href="#">privacy</a></li> <li><a href="#">call us</a></li> </ul> </div> </div> </div> 

Answer 1

Change the data:image to:

  data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%2367BA4D%22%2F%3E%3C%2Fsvg%3E

The color code is at the end, after the "fill" argument.

data:image/svg xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"><polygon points="0,4 4,0 8,4" fill="#67BA4D"/></svg>