如何改变内容流？

Question

在这个jsfiddle中,我正在尝试创建书签形状.只有一个三角形需要改变它的位置.

<div id = "bookmark">
  <div id = "rectangle"></div>
  <div id = "triangle-topleft"></div>
  <div id = "triangle-topright"></div>
</div>

我可以很容易地使用相对定位并转移它,但我不想这样做.我想要一个更具延展性的解决方案.

而不是从顶部到底部流动的形状.我希望最后一个形状从左向右流动.因此有3种形状,前两种形状处于完美位置,但第三种形状需要放置在第二种形状的右侧,而不是位于其下方.

我可以使用什么CSS来做到这一点？

Answer 1

添加float:left;到#triangle-topleft和margin-left:100px;到#triangle-topright

#triangle-topleft {
    position: static;
    width: 0;
    height: 0;
    border-top: 100px solid black;
    border-right: 100px solid transparent;
    float:left;
}
#triangle-topright {
    position: relative;
    width: 0;
    height: 0;
    border-top: 100px solid black;
    border-left: 100px solid transparent;
    margin-left:100px;
}

jsFiddle例子