zoukankan      html  css  js  c++  java
  • CSS 折角效果

    效果1

     
    .folded-corner{
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
        background: #58a; /* Fallback */
        background:
        linear-gradient(-135deg, transparent 2em, #58a 0);
    }

    效果二, 效果一的基础上加上以下样式

     
    .fc-2{
      background:
        linear-gradient(to left bottom,
        transparent 50%, rgba(0,0,0,.4) 0)
        no-repeat 100% 0 / 2em 2em,
        linear-gradient(-135deg, transparent 1.428em, #58a 0);
    }

    效果三    非45度角(效果一的样式加以下代码)

     
    .fc-3,.fc-4{
      position: relative;
      background:
        linear-gradient(-150deg, transparent 1.5em, #58a 0);
    }
    
    .fc-3:before,.fc-4:before{
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 1.73em;
      height: 3em;
       background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat;
      transform: translateY(-1.3em) rotate(-30deg);
      transform-origin: bottom right;
    }

    效果四 效果三的基础上加上以下代码

     
    .fc-4{
      border-radius: 5px;
    }
    
    .fc-4:before{
      border-bottom-left-radius: inherit;
      background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
      box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
    }

    更多参考链接http://www.w3cplus.com/css3/css-secrets/folded-corner-effect.html

  • 相关阅读:
    ASP.Net Core -- 模型验证
    C# -- nameof什么意思?
    C# -- value是什么意思?
    C# -- 异常(二)
    C# -- 异常(一)
    C# -- 委托(二)
    C# -- 委托(一)
    ASP.Net Core -- Controller返回View
    ASP.Net Core -- 中间件
    ASP.Net Core -- 服务注册和管道
  • 原文地址:https://www.cnblogs.com/lisa-lin/p/5541826.html
Copyright © 2011-2022 走看看