Question

检查link。我想将蓝色和黑色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和几个伪元素更容易实现此操作，然后将整个批次旋转起来。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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;
}

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

2 个答案: