Chciałbym ułożyć trójkąt pod divem

Question

Witam, chaiłbym, aby czerwony trójkąt znalazł się pod paskiem granatowym i niebieskim jednak nie mogę sobie poradzić za pomocą z-index, czy byłby w stanie ktoś mi pomóc?

Link do codepena:

https://codepen.io/Artur_Cislo/pen/eYWOgOO?editors=1100

<div id="ticket">
<div id="rhombus">
  <div id="secondRombus"></div>
</div>
  <div id="rectangle">
  </div>
  <div id="triangle"></div>
</div>

#rhombus {
	width: 15%;
	height: 100%;
	transform: skewX( -35deg );
	background-color: #0D1E28;
	margin: 20px 250px 0;
  
}
#secondRombus{
  width: 30px;
	height: 250px;
	transform: skewX( 1 deg );
	background-color: #0E53B0;

}
#rectangle{

   width: 450px;
	 height: 120px;
   position: absolute;
   top:-55%;
   right:0;
  border-right: 0px solid transparent;
	border-left: 100px solid   transparent;
	border-bottom: 130px solid #0D1E28;
	margin: 40px auto 0;
}
#triangle{
	width: 0;
	height: 0;
	border-top: 61px solid #F34A53;
	border-right: 61px solid transparent;
	margin: 25px auto 0;
  position: absolute;
  top: 128px;
  left: 180px;
   transform: rotate(90deg);
}
#ticket{
  background-color: green;
  position: relative;
  width: 730px;
  height: 250px;
}

/*   -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg);  */
         

 

Answer 1

Jeśli chodzi Ci o taki efekt, to przesuń element #triangle nad pozostałe dzieci elementu #ticket - żeby był jego pierwszym dzieckiem.

Comments

Tak, właśnie o coś takiego. Dzięki wielkie