纯CSS响应垂直丝带

Question

我试图创建一个RSS图形一个CSS响应丝带“结束”。这将最终成为一个WordPress的侧边栏RSS小部件。

我有工作在桌面上的版本就好了，但是，当缩小小部件不与其他事情一样规模的带状部分。我想知道我是在尝试不可能的还是以错误的方式接近它？我创建了一个版本的这对Codepen [here.]

任何帮助，任何人都可以在此挑战放贷将是最有帮助的。

Answer 1

而不是旋转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。请注意，这不会在< = IE9上工作。

PS。 retabbed使用tabifier你的HTML和删除了一些狡猾的CSS（你有一些空的风格，例如，padding-left:;这可能会导致问题）

Answer 2

竖幅与倾斜底部

<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)