Use css to create a custom arrow shape [duplicate]

Answer 1

If you can split your flag into two divs (definitely not practical in all cases) you can get a smoothly rendered arrow (note, this WILL also skew your divs' content):

body
{
    background-color: gold;
}

#flag_top {
    width: 400px; height: 40px; background: #231f20; position: relative;
    	-webkit-transform: skew(40deg);
	   -moz-transform: skew(40deg);
	     -o-transform: skew(40deg);
    margin-left: 30px;
}
#flag_bottom {
    width: 400px; height: 40px; background: #231f20; position: relative;
    	-webkit-transform: skew(320deg);
	   -moz-transform: skew(320deg);
	     -o-transform: skew(320deg);
    margin-left: 30px;
}