CSS Diamond / Triangle shaped divider line / border

Question

I have the following gold dividing line I'm trying to create in pure CSS.

I'm trying to create this with the transform:scale; CSS So far I have found the following:

.border_angle {
	border: 50vw solid transparent;
	width: 0;
	height: 0;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-top-color: transparent;

	transform: scaleY(0.105) translateY(-50%);
	-webkit-transform: scaleY(0.105) translateY(-50%);
	-o-transform: scaleY(0.105) translateY(-50%);
	-moz-transform: scaleY(0.105) translateY(-50%);
	-ms-transform: scaleY(0.105) translateY(-50%);
	
	position: absolute;
	transform-origin: top center;
	top: 0;
	left: 0;
	right: 0;
	z-index: 11;
}

.border_angle_gold_l {
	border-left-color: #BE955A;
}

.border_angle_gold-light_r {
	border-right-color: #CCA56B;
}

<div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r"></div>

Essentially, I nearly have it but I just need to reverse the triangles!! I can't figure out how... Any help would be massively appreciated.

Answer 1

I would do this differently with less of code and linear-gradient:

.triangle {
  margin-top:100px;
  height:80px;
  background-image:
    linear-gradient(to bottom right, transparent 50%,#BE955A 51%),
    linear-gradient(to top right, transparent 50%,#BE955A 51%),
    linear-gradient(to bottom left, transparent 50%,#CCA56B 51%),
    linear-gradient(to top left, transparent 50%,#CCA56B 51%);
  background-position:0 0,0 100%,100% 0,100% 100%;
  background-size:50.3% 50%;
  background-repeat:no-repeat;
}

<div class="triangle">
</div>

Here is another idea using clip-path:

.triangle {
  margin-top: 100px;
  height: 80px;
  background: linear-gradient(to left, #CCA56B 50%, #BE955A 0); 
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<div class="triangle">
</div>