So basically I have a emblem/shield shape and I want to have it 4 different colors on each edge. Like on this pic but obviously with 4 different color:
https://us.123rf.com/450wm/konstantinks/konstantinks1403/konstantinks140300271/26709864-medieval-shield-on-white-background.jpg?ver=6
I’ve made the shield and it looks like this:
https://codepen.io/Franklin777111/pen/abRdMep
I’ve tried adding filter with black bg like so:
filter: invert(13%) sepia(57%) saturate(4049%) hue-rotate(357deg) brightness(97%) contrast(116%);
or an other div with position absolute but those are not following the shape of the emblem.
Any ideas or should I change the code completely to do this?
2
Answers
Not sure about this but … You maybe can to something with this
You can use 16-color svg files and illustrator program but you should convert it with online svg url encoder tools. I hope it works for you.