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

    html

    <div class="one">12345</div>
    <div class="two">abcde</div>

    css

      .one{
        height: 200px;
        width: 200px;
        margin: 10px auto;
        line-height: 200px;
        background: yellowgreen;
        background: 
                  linear-gradient(-45deg,transparent 15px, yellowgreen 0)bottom right,
                  linear-gradient(-135deg,transparent 15px, yellowgreen 0)top right,
                  linear-gradient(135deg,transparent 15px, yellowgreen 0)top left,
                  linear-gradient(45deg,transparent 15px, yellowgreen 0)bottom left;
                  background-size: 50% 50%;
                  background-repeat: no-repeat;
      }
      .two{
        height: 200px;
        width: 200px;
        margin: 10px auto;
        background: #58a;
        line-height: 200px;
        background: 
                  radial-gradient(circle at bottom right,transparent 15px, #58a 0)bottom right,
                  radial-gradient(circle at top right,transparent 15px, #58a 0)top right,
                  radial-gradient(circle at top left,transparent 15px, #58a 0)top left,
                  radial-gradient(circle at bottom left,transparent 15px, #58a 0)bottom left;
                  background-size: 50% 50%;
                  background-repeat: no-repeat;
      }

    acss的也可以这样写

    @mixin current_color($bg,$tr){
      background: $bg;
      background: 
                  linear-gradient(-45deg,transparent $tr, $bg 0)bottom right,
                  linear-gradient(-135deg,transparent $tr, $bg 0)top right,
                  linear-gradient(135deg,transparent $tr, $bg 0)top left,
                  linear-gradient(45deg,transparent $tr, $bg 0)bottom left;
                  background-size: 50% 50%;
                  background-repeat: no-repeat;
    }
    .one{
        height: 200px;
        width: 200px;
        margin: 10px auto;
        line-height: 200px;
        @include current_color(yellowgreen,15px)
      }

    如图效果

  • 相关阅读:
    Xcode8 去除系统日志输出
    SVN参考命令
    Xcode模拟网络状态
    iOS 图片拉伸
    iOS进阶
    label中添加图片
    Cookie的格式及组成
    java数据类型总结
    Hibernate一级缓存与二级缓存的区别
    mysql连接jdbc查询代码
  • 原文地址:https://www.cnblogs.com/yhhBKY/p/10642696.html
Copyright © 2011-2022 走看看