纯CSS响应垂直功能区

Question

我正在尝试为RSS图形创建一个CSS响应功能区"结束".这最终将成为Wordpress侧边栏RSS小部件.

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

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

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(链接)