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

  • 相关阅读:
    用户交互程序
    使用 fetch 封装网络请求,返回promise 对象
    我收藏的脚手架
    DOM API简析
    encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别
    Flex 布局
    react 基础
    javaScript 设计模式
    js 之正则表达式
    如何使用RedisTemplate访问Redis数据结构
  • 原文地址:https://www.cnblogs.com/zxyun/p/8033982.html
Copyright © 2011-2022 走看看