Triangle multicolor background css

user_7281725 0
Viewed 61

I'm new here so if I added the wrong post then sorry. I have a problem with styling a multicolored background that ends with a triangle. Below I am pasting what I managed to create. How to write it correctly in CSS? I am enclosing a graphic of how it should look like.

#wrapper {
  display:flex;
}    
#triangle-multicolor-box1 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #007f9f;
    }
#triangle-multicolor-box1:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #007f9f;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }

#triangle-multicolor-box2 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #0298bb;
    }
#triangle-multicolor-box2:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #0298bb;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }
#triangle-multicolor-box3 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #01acd7;
    }
#triangle-multicolor-box3:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #01acd7;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }
  
  
<div id="wrapper">
  <div id="triangle-multicolor-box1"></div>
  <div id="triangle-multicolor-box2"></div>
  <div id="triangle-multicolor-box3"></div>
</div>

Triangle multicolor background

background css
2 Answers

The trick here is z-index for the correct position of each element see example:

#wrapper {

  display:flex;
}    
#triangle-multicolor-box1 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #007f9f;
    }
#triangle-multicolor-box1:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #007f9f;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      z-index:2;
    }

#triangle-multicolor-box2 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #0298bb;
    }
#triangle-multicolor-box2:before {
      content: "";
      position: absolute;
      right: -50px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 50px solid #0298bb;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      z-index:1;
    }
#triangle-multicolor-box3 {
      width: 150px;
      height: 100px;
      position: relative;
      background: #01acd7;
    }
<div id="wrapper">
  <div id="triangle-multicolor-box1"></div>
  <div id="triangle-multicolor-box2"></div>
  <div id="triangle-multicolor-box3"></div>
</div>

user_124027320

Already answered, but for info if you are curious to find other ways

2 other possibilities:

#wrapper {
  display: flex;
  margin: 1em;
  width: max-content;
  /*shrink to content */
  background: linear-gradient( 45deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 0 / 100% 50% no-repeat, linear-gradient( 135deg, #007f9f 30%, #0298bb 30%, #0298bb 60%, #01acd7 60%, #01acd7 89.5%, #0000 90%) 0 100% / 100% 50% no-repeat;
}

#wrapper:hover {
  filter: drop-shadow( 0px 0px 3px #000)
}

div div {
  display: flex;
  align-items: center;
  width: 150px;
  height: 100px;
}
  
<div id="wrapper">
  <div id="triangle-multicolor-box1">hello</div>
  <div id="triangle-multicolor-box2">the</div>
  <div id="triangle-multicolor-box3">world</div>
</div>

#wrapper {
  display: flex;
  margin: 1em;
}

#wrapper:hover {/* for infos*/
  filter: drop-shadow( 0px 0px 3px #000)
}

#wrapper>div {
  padding-left: 50px;
  margin-left: -50px;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

body>div {}

div div {
  display: flex;
  align-items: center;
}

#wrapper>#triangle-multicolor-box1 {
  padding: 0;
  width: 150px;
  height: 100px;
  position: relative;
  margin: 0;
  background: #007f9f;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%, 0% 0%);
}

#triangle-multicolor-box2 {
  width: 150px;
  height: 100px;
  position: relative;
  background: #0298bb;
}

#triangle-multicolor-box3 {
  width: 150px;
  height: 100px;
  position: relative;
  background: #01acd7;
}
<div id="wrapper">
  <div id="triangle-multicolor-box1">hello</div>
  <div id="triangle-multicolor-box2">the</div>
  <div id="triangle-multicolor-box3">world</div>
</div>

user_24420990
Related