zoukankan      html  css  js  c++  java
  • css3实现左右锯齿效果

    要实现的效果:css3实现左右锯齿效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    .demo {
      list-style: none;
       100%;
      height: 180px;
      text-align: center;
    }
    .demo li {
      position: relative;
       20%;
      height: 100%;
      margin-right: 3%;
      background: #f60;
      display: inline-block;
    }
    .demo li:before, .demo li:after {
      content: "";
      position: absolute;
      top: -20px;
      display: block;
       10px;
      height: 100%;
      margin-top: 20px;
      background-size: 20px 10px;
    }
    .demo li:before {
      left: -10px;
      background-color: #fff;
      background-position: 100% 35%;
      background-image: linear-gradient(-45deg, #f60 25%, transparent 25%, transparent), 
                      linear-gradient(-135deg, #f60 25%, transparent 25%, transparent), 
                      linear-gradient(-45deg, transparent 75%, #f60 75%), 
                      linear-gradient(-135deg, transparent 75%, #f60 75%);
    }
    .demo li:after {
      right: -10px;
      background-color: #f60;
      background-position: 100% 15%;
      background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent), 
                     linear-gradient(-135deg, #fff 25%, transparent 25%, transparent), 
                     linear-gradient(-45deg, transparent 75%, #fff 75%), 
                     linear-gradient(-135deg, transparent 75%, #fff 75%);
    }
    </style>
    </head>
    <body>
    <ul class="demo">
      <li></li>
      <li></li>
      <li></li>
    </ul>
    </body>
    </html>

    demo:效果

    原文地址:http://www.qdfuns.com/notes/29797/d6acfd6011835aabc3ac11d6abed3e59.html

  • 相关阅读:
    通过接口实现适用于SqlServer和MySql的SqlHelper
    javascript面向对象(二)
    闭包
    javascript面向对象(一)
    引用类型——function
    引用类型——数组
    引用类型
    javascript变量的作用域
    正则表达式语法
    FCKeditor插件 中文解释
  • 原文地址:https://www.cnblogs.com/zxyun/p/8033982.html
Copyright © 2011-2022 走看看