CODEWITHSUNDEEP
css
Husna
Husna

Reputation: 1386

Div divided into five traingles

Here I'm trying to divide a <div> into 5 different triangles. I have tried using CSS using borders but couldn't achieve the desired output. Can anyone point me in the right direction. How should I achieve this output.
mockup of desired output

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

Upvotes: 2

Views: 139

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

Use multiple background if it's only about visual result:

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

Here is an idea with clip-path if you want to consider different divs:

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

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114991

SVG and a number of polygons

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>

Upvotes: 4

Related Questions