Каков наилучший способ размещения дочерних элементов в родительском div?

Question

Проверьте это link. Я хочу разместить синий и черный div точно в правой и нижней части красного div соответственно. Я хочу, чтобы правая вершина синего div совпадала с правой вершиной красного, а нижняя вершина черного div выравнивалась с нижней вершиной красного. Каков наилучший способ сделать это? Спасибо заранее.

HTML-

<div id="diamond"> 
<div id="diamond_right"></div> 
<div id="diamond_bottom"></div> 
</div> 

CSS-

#diamond { 
width: 0; 
height: 0; 
border: 300px solid transparent; 
border-bottom-color: red; 
position: relative; 
top: -300px; 
z-index:0; 
} 

#diamond:after { 
content: ''; 
position: absolute; 
left: -300px; 
top: 300px; 
width: 0; 
height: 0; 
border: 300px solid transparent; 
border-top-color: red; 
} 

#diamond_right { 

width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom-color: blue; 
position: relative; 
top: -50px; 
z-index:1; 
} 

#diamond_right:after { 
content: ''; 
position: absolute; 
left: -50px; 
top: 50px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top-color: blue; 
} 

#diamond_bottom { 

width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom-color: black; 
position: relative; 
top: -50px; 
z-index:2; 

} 

#diamond_bottom:after { 
content: ''; 
position: absolute; 
left: -50px; 
top: 50px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top-color: black; 
} 

Answer 1

Намного проще сделать это с помощью одного нормального DIV и пару псевдо элементов с использованием стандартных методов, а затем повернуть всю партию вместе.

#diamond { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: red; 
 
    position: relative; 
 
    margin: 75px; 
 
    transform: rotate(-45deg); 
 
} 
 
#diamond::before, 
 
#diamond::after { 
 
    content: ''; 
 
    width: 50px; 
 
    height: 50px; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 
#diamond::before { 
 
    background: blue; 
 
    right: 0; 
 
} 
 
#diamond::after { 
 
    background: black; 
 
    left: 0; 
 
}

<div id="diamond"></div>

Answer 2

Я сделал это с синей в вашей скрипке и совмещена с правой вершиной, если вы подключите это это то, что вы были надеясь достичь?

#diamond_right { 

width: 0; 
height: 0; 
border: 50px solid transparent; 
border-bottom-color: blue; 
position: absolute; 
top: 200px; 
right: -300px; 
z-index:1; 
} 

#diamond_right:after { 
content: ''; 
position: absolute; 
left: -50px; 
top: 50px; 
width: 0; 
height: 0; 
border: 50px solid transparent; 
border-top-color: blue; 
}