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