CSS Diamond / Triangle shaped divider line / border - html

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>

Answer 2

You could try duplicating the div and then adding translateX like:
.border_angle {
border: 50vw solid transparent;
width: 0;
height: 0;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
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;
}
.first {
transform: scaleY(0.105) translateY(-50%) translateX(50%);
-webkit-transform: scaleY(0.105) translateY(-50%) translateX(50%);
-o-transform: scaleY(0.105) translateY(-50%) translateX(50%);
-moz-transform: scaleY(0.105) translateY(-50%) translateX(50%);
-ms-transform: scaleY(0.105) translateY(-50%) translateX(50%);
}
.second {
transform: scaleY(0.105) translateY(-50%) translateX(-50%);
-webkit-transform: scaleY(0.105) translateY(-50%) translateX(-50%);
-o-transform: scaleY(0.105) translateY(-50%) translateX(-50%);
-moz-transform: scaleY(0.105) translateY(-50%) translateX(-50%);
-ms-transform: scaleY(0.105) translateY(-50%) translateX(-50%);
}
<div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r first"></div>
<div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r second"></div>

Answer 3

Just to complete the other good answers:
The pseudo element / border approach
You can create the triangles with the help of borders and apply it to the pseudo elements ::before and ::after of your divider. This reduces your code, you only need one element in your markup and you don't have to use transformations:
.divider {
position: relative;
width: 500px;
}
.divider::before,
.divider::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.divider::before {
border-right: 250px solid #bf9655;
left: 0;
}
.divider::after {
border-left: 250px solid #cda667;
right: 0;
}
<div class="divider"></div>
The SVG approach
As SVG is widely supported now, it is also reasonable to use SVG to create shapes. Here would be a simple example, reducing the code length to a minimum of 141B:
<svg viewbox="0 0 24 2">
<polygon points="0,1 12,0 12,2" style="fill:#bf9655;" />
<polygon points="12,0 24,1 12,2" style="fill:#cda667;" />
</svg>