0

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

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

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

而不是从上到下流动的形状。我希望最后一个形状从左到右流动。所以有 3 个形状，前两个在完美的位置，但第三个需要放在第二个形状的右侧，而不是在它下面。

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

4

5 回答 5

5

添加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 示例

于 2013-10-04T13:51:41.527 回答
4

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

演示

#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: "";是让这个东西工作所必需的，也正在使用absolute设置为的值来定位这两个元素-100

演示（使用单个元素）

注意：:before和:afterpseudo 在旧版本的 IE 中可能会失败，但您始终可以使用 polyfills 来使用CSS 3属性，此外，有关浏览器支持的更多信息，您可以查看此内容。

于 2013-10-04T13:51:23.527 回答
1

将 display:inline-block 添加到两个三角形。它们正在堆叠，因为它们默认为 display:block。

于 2013-10-04T13:52:07.687 回答
1

您可以添加float: leftto#triangle-topleft和margin-left: 100pxto #triangle-topright。

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

于 2013-10-04T13:53:47.267 回答
1

只需添加float:left到#triangle-topleft 和#triangle-topright 就足够了。

见小提琴：http: //jsfiddle.net/nfxYE/

于 2013-10-04T14:00:12.327 回答