css - 在父 div 中定位子元素的最佳方式是什么？

Question

检查这个link .我想将蓝色和黑色 div 分别准确定位在红色 div 的右侧和底部。我希望蓝色 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>