CSS 菱形/三角形分隔线/边框

Question

我有以下黄金分割线，我想在纯 CSS 中创建。

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

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

基本上，我几乎已经掌握了，但我只需要反转三角形！！我不知道如何...任何帮助将不胜感激。

Answer 1

我会用更少的代码和 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>

这是使用 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

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

.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

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

伪元素/边框方法

您可以借助边框创建三角形并将其应用于分隔线的伪元素 ::before and ::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>

CSS 菱形/三角形分隔线/边框

CSS Diamond / Triangle shaped divider line / border

html

css

css-transforms

css-shapes

伪元素/边框方法

SVG 方法