CODEWITHSUNDEEP
css
Travis
Travis

Reputation: 157

Draw 3 triangles with css

I am trying to make this design

I am trying to make the design above in CSS. I tried using clip-path to make the triangle in the centre but then the blue and green triangles can't be seen. How can I make this the width of the screen and responsive too?

These are the clip paths for the triangle:

.centerTriangle {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: red;
}

.leftTriangle {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  background-color: blue;
}

.rightTriangle {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-color: green;
}
<div class="leftTriangle"></div>
<div class="centerTriangle"></div>
<div class="rightTriangle"></div>

Would appreciate any help thanks!

Upvotes: 2

Views: 196

Answers (3)

curviture
curviture

Reputation: 49

if you need to make it work with three divs, here is my solution

* {
  margin: 0;
}

.container {
  height: 100vh;
  background-color: red;
  position: relative;
}

.container *{
  position: absolute;
  inset: 0
}

.centerTriangle {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: red;
  
}

.leftTriangle {
  clip-path: polygon(0 0, 0% 100%, 50% 100%);
  background-color: blue;
}

.rightTriangle {
  clip-path: polygon(100% 0, 100% 100%, 50% 100%);
  background-color: green;
}
<div class="container">
  <div class="leftTriangle"></div>
  <div class="centerTriangle"></div>
  <div class="rightTriangle"></div>
</div>

Upvotes: 0

BehRouz
BehRouz

Reputation: 1364

Here is a responsive version using border:

body {
  border-top: 100vh solid red;
  border-left: 50vw solid blue;
  border-right: 50vw solid green;
  margin:0
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

Gradients can do it:

html {
  min-height:100%;
  
  background:
    linear-gradient(to top right,blue  50%,red 0) left /50.1% 100% no-repeat,
    linear-gradient(to top left ,green 50%,red 0) right/50.1% 100% no-repeat;
}

Upvotes: 4

Related Questions