创建一个褶皱带

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

创建一个褶皱带

本实例主要是对: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/

nike air max 90 Classic

如需转载,烦请注明出处:https://www.w3cplus.com/demo/406.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部