CSS钻石/三角形分隔线/边框

Question

我有以下黄金分界线，我试图用纯CSS创建。

我尝试使用transform:scale; CSS创建此内容到目前为止，我发现了以下内容：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

基本上，我几乎拥有它，但我只需要反转三角形!!我无法弄清楚如何......任何帮助都会受到大力赞赏。

Answer 1

我会以较少的代码和linear-gradient：

执行此操作

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是使用clip-path的另一个想法：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试复制div，然后添加translateX，如：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只是为了完成其他好的答案：

伪元素/边界方法

您可以借助边框创建三角形，并将其应用于分割器的伪元素::before和::after。这会减少您的代码，您只需要在标记中使用一个元素，而不必使用转换：

.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>

SVG方法

现在作为SVG is widely supported，使用SVG创建形状也是合理的。这是一个简单的例子，将代码长度减少到最小值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>