Question

我正在尝试在CSS中创建那些对角条纹布局，如下所示：http://www.website-gallery.com/wp-content/uploads/tdomf/355/Nike%20Bloed%20Oranje%20Art%20Challenge%202.0.png

这是我的代码：http://codepen.io/Chiz/pen/zvWRNW

看起来没问题，但问题是“div class =”blacktop“没有出现。我希望它与灰色div重叠，看起来即使我设置位置，z-index也没有效果：相对于所有DIV。

<% products.each do |product| %>
   <%= content_tag :tr do %>
     <%= content_tag :td, product.name %>
     <% product.size.each do |size| %>
        <%= content_tag :td do %>
           <%= size %> | <%= button_to size.titleize, line_items_path, params: { product_id: product.id, size: size } %>
        <% end %>
     <% end %>
   <% end %>
<% end %>

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
}

Answer 1

由于你的前两个div没有浮动或任何东西，它们有一个高度并推动下面的div。如果您停用身上的overflow:hidden，则会看到您的黑色div。

长答案简短：让你的柏油position:absolute让它漂浮在背景div之上。

示例：http://codepen.io/anon/pen/rOdJQr

HTML：

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

CSS

@mixin prefix ($prop, $val)
{
  -webkit-#{$prop}: #{$val};
  -moz-#{prop}: #{$val};
  -ms-#{$prop}: #{$val};
  #{$prop}: #{$val};
}

body
{
  overflow:hidden;
}

div
{
  position:relative;
}

div.gray
{
  width:135%;
  height:450px;
  background-color:gray;
  margin:-10px 0 0 -140px;
  z-index:100;
  @include prefix(transform, skew(-20deg,-20deg));
  @include prefix(transform, rotate(8deg));
}

div.blackbottom
{
  @extend div.gray;

  margin-top:-100px;
  background-color:white;
  z-index:200;
  @include prefix(transform, rotate(17deg));
}

div.blacktop
{
  position: absolute;
  bottom: 10px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
}

Answer 2

我向.blacktop添加了与其他2个div相同的共享设置，因此如果你更新你的css就会显示。

div.blacktop
{
  @extend div.gray;

  top: -500px;
  width:135%;
  height:200px;
  background-color:black;
  z-index:300;
  @include prefix(transform, rotate(17deg));
}

这里是一个片段

body {
  overflow: hidden;
}

div {
  position: relative;
}

div.gray, div.blackbottom, div.blacktop {
  width: 135%;
  height: 450px;
  background-color: gray;
  margin: -10px 0 0 -140px;
  z-index: 100;
  -webkit-transform: skew(-20deg, -20deg);
  -moz-prop: skew(-20deg, -20deg);
  -ms-transform: skew(-20deg, -20deg);
  transform: skew(-20deg, -20deg);
  -webkit-transform: rotate(8deg);
  -moz-prop: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

div.blackbottom {
  margin-top: -100px;
  background-color: white;
  z-index: 200;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

div.blacktop {
  top: -500px;
  width: 135%;
  height: 200px;
  background-color: black;
  z-index: 300;
  -webkit-transform: rotate(17deg);
  -moz-prop: rotate(17deg);
  -ms-transform: rotate(17deg);
  transform: rotate(17deg);
}

<div class="gray"></div>
<div class="blackbottom"></div>
<div class="blacktop"></div>

DIV没有显示，z-index也没有效果

2 个答案: