本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用，一般来说我们经常会使用宽高为0，然后再运用border来设计一个三角出来，可是这里是应用border三角和一个宽度或高度的结合，设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠，:after生成一个阴影色的旋转下的折叠。

demodownload

css主要代码：

.ribbon:after {
    content: "";   
    display: block;
    width: 40px;
    height: 0px;
     
    position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 20;
     
    border-bottom: 80px solid #de6625;
    border-right: 80px solid transparent;
     
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
    } 

demodownload

查看更多：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/create-a-swish-css3-folded-ribbon-in-5-minutes/