div分成五个三角形

Question

在这里，我试图将

划分为 5 个不同的三角形。 我曾尝试使用 CSS 使用边框，但无法实现所需的输出。谁能指出我正确的方向。我应该如何实现这个输出。

.box {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #ccc;
}

.traingle {
  width: 20%;
  height: 400px;
  border: 3px solid #000;
}

<div class="box">
  <div class="traingle"></div>
  <div class="traingle"></div>
  <div class="traingle"></div>
  <div class="traingle"></div>
  <div class="traingle"></div>
</div>

【问题讨论】：

Answer 1

SVG 和许多多边形

div {
  width: 80%;
  margin: 1em auto;
}

<div>
  <svg viewbox="0 0 200 100">
    <polygon points="0,100 100,100 0,50 "
          style="stroke:#000000; fill:#ff0000; stroke-width: 1;"/>
    <polygon points="0,50 100,100 50,00 0,0 "
          style="stroke:#000000; fill:#00ff00; stroke-width: 1;"/>
    <polygon points="100,100 50,00 150,0"
          style="stroke:#000000; fill:#0000ff; stroke-width: 1;"/>
    <polygon points="100,100 200,50 200,0 150,0"
          style="stroke:#000000; fill:#00ffff; stroke-width: 1;"/>
    <polygon points="100,100 200,100, 200,50"
          style="stroke:#000000; fill:#ff00ff; stroke-width: 1;"/>
  </svg>
</div>

Answer 2

如果只是为了视觉效果，请使用多个背景：

.box {
  width:250px;
  height:150px;
  background:
    linear-gradient(to bottom right,transparent 49.5%,green  50%) bottom right/50% 50%,
    linear-gradient(to bottom right,transparent 49.5%,purple 50%) bottom right/50% 200%,
    
    linear-gradient(to bottom left ,transparent 49.5%,yellow 50%) bottom left/50% 50%,
    linear-gradient(to bottom left ,transparent 49.5%,red    50%) bottom left/50% 200%,
    
    blue;
  background-repeat:no-repeat;
}

<div class="box">

</div>

如果你想考虑不同的 div，这里有一个关于 clip-path 的想法：

.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
}
.box > div:nth-child(2),
.box > div:nth-child(4){
  right:50%;
  -webkit-clip-path:polygon(0 0,100% 100%, 0 100%);
  clip-path:polygon(0 0,100% 100%, 0 100%);
}
.box > div:nth-child(3),
.box > div:nth-child(5){
  left:50%;
  -webkit-clip-path:polygon(100% 0,100% 100%, 0 100%);
  clip-path:polygon(100% 0,100% 100%, 0 100%);
}

.box > div:nth-child(2),
.box > div:nth-child(3){
  top:-50%;
}

.box > div:nth-child(4),
.box > div:nth-child(5){
  top:50%;
}


/*Irrelevant, simply to illustrate hover effect*/
.box > div:hover {
   filter:grayscale(100%);
}

<div class="box">
  <div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>