Question

我正在尝试使用css列来制作pinterest样式布局。它正常工作，但列中的元素在顶角有一条使用overflow: hidden的对角色带。这些色带仅显示在第一个列的元素上。我希望它们出现在每一栏中的所有元素上。如果您删除overflow: hidden，则所有元素上都会显示色带。我已经做了一个jsfiddle来证明：

https://jsfiddle.net/6ooefvq3/5/

这种行为似乎只发生在Mac上的chrome（49.0.2592.0 canary）上，在safari（9.0.2）上看起来没问题。

知道我可能缺少什么，或者需要更改，所以这些色带显示在所有列中的所有元素上？

修改

Answer 1

我认为这个问题与功能区上的转换属性以及相对定位的事实有关......但是这种行为对我来说太奇怪了。它可能与多次报告的fixed position bug相关或类似。

我已经提出了以下使用边框而不是溢出剪切的div：

首先使用overflow: hidden;将变换移至div，然后从功能区中删除position: relative;。然后你应该看到所有的丝带。

其次从功能区中删除背景和填充并添加边框，如下所示：

border-bottom: 6px solid red;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;

最后，您需要做的就是定位包装器的大小。您也可以删除overflow: hidden;，但因为您在功能区上有阴影我会留下它。

Here is your adjusted jsfiddle似乎在起作用（至少对我而言）。： - ）

一个很好的衡量标准：

.columns {
  -webkit-column-width: 250px;
  column-width: 250px;
  width: 95%;
  height: 440px;
}

body {
background: #ccc;
}

.box {
  background: white;
  position: relative;
  width: 70px;
  height: 100px;
  margin: 10px 0;
}

.ribbon-wrapper {
  width: 32px;
  height: 12px;
  overflow: hidden; /* remove this and the ribbons appear */     
  position: absolute;
  right: -10px;
  top: 0px;
   -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}

.ribbon {
  font: bold 15px Sans-Serif;
  font-size: 8px;
  text-align: center;
  width: 20px;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  border-bottom: 6px solid red;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

<div class="columns">
	  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
</div>

Answer 2

后代

/*
 __     __   __   __                ___       __   ___  __      ___  __   __     
|__) | |__) |__) /  \ |\ |    |__| |__  |    |__) |__  |__)    |__  /  \ |__)
|  \ | |__) |__) \__/ | \|    |  | |___ |___ |    |___ |  \    |    \__/ |  \
 ___  __   __       ___  ___       __      __             
|__  |__) /  \ |\ |  |  |__  |\ | |  \    |__)  /\  | |\ |
|    |  \ \__/ | \|  |  |___ | \| |__/    |    /~~\ | | \| 
*/


@mixin HELPER-ribbon($width:130px,$thickness:35px,$shadow:0,$font:10px,$font-color:#000,$color:gold) {
& {
position:absolute;
top:0;
right:0;
user-select: none;
pointer-events: none;
width:$width+(($thickness*1.41)/2*(-1)); //1.41 ~ √2
height: $width+(($thickness*1.41)/2*(-1));
overflow: hidden;
color:$font-color;

&:before { 
  @if($shadow==1){
    filter: drop-shadow(0px 0px 7px rgba(#000,0.1));
    //box-shadow:0px 0px 7px rgba(#000,0.1);
  }
  content:'';
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  transform: rotate(45deg);
  transform-origin: left top;
  display: inline-flex;
  padding-bottom:-($thickness*0.5);
  border-bottom: $thickness solid $color;
  border-left: $thickness solid transparent;
  border-right: $thickness solid transparent;
  height: 0px;
  width: $width;
  line-height:$thickness - 2px; 
}
&:after {
  content:attr(title);
  font-weight:500;
  text-transform: uppercase;
  font-size: $font;
  transform: rotate(45deg);
  transform-origin: left top;
  line-height:$thickness - 2px; 
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  width: $width;
  text-align:center;
  z-index:2;
}
}
}
.ribbon {
  width:100%; @include HELPER-ribbon($width: 150px, $thickness:20px, $shadow:1)
}

https://pp98rx64q0.codesandbox.io/

css3列和溢出隐藏

2 个答案: