代码之家 › 专栏 › 技术社区 › Husna

分为五节车厢

html5-canvas canvas svg css

Husna · 技术社区 · 5 年前

在这里,我试图将a<div>分成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>

2 回复 | 直到 5 年前

Temani Afif 5 年前

如果仅与视觉效果有关,请使用多个背景:

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

Paulie_D 5 年前

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>