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 example

Answer 2

首先，您不必声明position: static;，因为默认情况下它已经是静态的（除非您使用responsive design，您需要在某个解析点重置属性值），其次，将position: relative;分配给#bookmark并制作第二个三角形position: absolute;

Demo

#bookmark{
    width: 200px;
    position: relative;
}
#rectangle {
    width: 200px; 
    height: 300px; 
    background: black; 
}
#triangle-topleft {
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-right: 100px solid transparent; 
}

#triangle-topright {
    position: absolute;
    right: 0;
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-left: 100px solid transparent; 
    bottom: 0;
}

注意：确保不要制作第一个三角形position: absolute;，否则需要重新定位三角形。但是，这是您可以获得的最佳方法，因为您已将absolute包裹在relative容器中。

你也可以看一下这个很棒的东西 - Font Awesome - Bookmark，你可以把它调整到你想要的大小。

您正在尝试的事情也可以通过使用:before和:after伪以及content属性来实现。所以你可以摆脱额外的三角形元素。

正如我所说，你可以用一个元素创建这个东西。

#bookmark{
  width: 200px;
  position: relative;
  height: 300px; 
  background: black; 
}

#bookmark:before {
  width: 0; 
  height: 0; 
  border-top: 100px solid black; 
  border-right: 100px solid transparent;
  display: block;
  content: "";
  position: absolute;
  bottom: -100px;
}

#bookmark:after {
  position: absolute;
  right: 0;
  width: 0; 
  height: 0; 
  border-top: 100px solid black; 
  border-left: 100px solid transparent; 
  bottom: -100px;
  display: block;
  content: "";
}

在这里，我使用:before和:after伪，display: block;和content: "";对于让这件事工作至关重要，同时也使用{{定位两个元素1}}的值设置为absolute

Demo（使用单个元素）

注意：-100和:before伪在旧版IE中可能会失败，但是，您也可以使用polyfill来使用:after属性有关浏览器支持的更多信息，您可以查看this。

Answer 3

为两个三角形形状添加display：inline-block。他们正在堆叠，因为他们默认显示：阻止。

Answer 4

您只需将float: left添加到#triangle-topleft，将margin-left: 100px添加到#triangle-topright。

要删除不必要的标记，您还可以使用:before和:after伪元素代替#triangle-*。

Answer 5

只需将float:left添加到＃triangle-topleft和＃triangle-topright即可。

请参阅小提琴：http://jsfiddle.net/nfxYE/

如何改变内容流？

5 个答案: