纯CSS响应垂直功能区

Question

我正在尝试为RSS图形创建一个CSS响应功能区“end”。这最终将成为Wordpress侧边栏RSS小部件。

我在桌面版本上工作得很好，但是，当按比例缩小时，小部件的功能区部分不会与其他所有内容一起扩展。我想知道我是在尝试不可能还是以错误的方式接近它？我在Codepen [here.]

上创建了此版本

任何人都可以在这次挑战中提供帮助，这将是最有帮助的。

Answer 1

倾斜底部的垂直横幅

<div class="verticalbanner"></div>

.verticalbanner {
    background: #f8f8f8; //ribbon color
    height: 87px; // ribbon height
    width: 74px; // ribbon width
}
.verticalbanner:after,.verticalbanner:before {
    content: '';
    position: absolute;
    border-top: 15px solid #eee; // angle degree, reduce to reduce degree of angles
    height: 0; // no height, no content, just border
    width: 0;
    top: 100%;
}
.verticalbanner:after { // right angle
    border-left: 50px solid transparent;
    right:0;
}
.verticalbanner:before { // left angle
    border-right: 50px solid transparent;
    left:0;
}

jsFiddle (link)

Answer 2

我建议使用div创建响应三角形，而不是旋转linear-gradient来尝试制作被遮盖的部分。

我不确定这是否是你想要的'结束'的方向，但我是从原始div轮换的方向假设的。

所以左角看起来像这样

#ribbon .left_corner {
    width: 50%;
  bottom:0;
    left: 0;
  top:20px;
  position:absolute;
  overflow: hidden;
    z-index: 1;
  background: -moz-linear-gradient(to right top,  #FFF 50%, transparent 50%);
  background: -webkit-gradient(linear, right top, left bottom, color-stop(50%,transparent), color-stop(50%,#FFF));
  background: -webkit-linear-gradient(to right top,  #FFF 50%, transparent 50%);
  background: -o-linear-gradient(to right top,  #FFF 50%, transparent 50%);
  background: -ms-linear-gradient(to right top,  #FFF 50%, transparent 50%);
  background: linear-gradient(to right top, #FFF 50%, transparent 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}

这是格式化的codepen。请注意，这不适用于＆lt; = IE9。

PS。使用tabifier重新抓取您的HTML并删除了一些狡猾的CSS（您有一些空的样式，例如。padding-left:;，这可能会导致问题）