Triangle multicolor background css - css

Question

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

Answer 1

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>

Answer 2

Already answered, but for info if you are curious to find other ways
2 other possibilities:
linear-gradient can be useful once in a while:
#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>
clip-path
#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>