zoukankan      html  css  js  c++  java
  • css3实现梯形三角


    近期移动端项目中,图片很多
    移动端尽量少图片,以便提升加载速度!这时候css3可以大放光芒
    比如梯形的背景图

    ---------------------------------

    -----------------------------------------------


    2个标签即可实现梯形背景
    ----------------html----------------------
    <div class="box">
    <span>标题</span>
    </div>
    -----------------css------------------------
    .box {
    border-bottom: 1px solid orange;
    margin-bottom: 100px;
    }
    .box span {
    display: inline-block;
    padding: 10px 20px;
    background: orange;
    color: #fff;
    20%;
    position: relative;
    }
    .box span:after{
    content: '';
    display: inline-block;
    30px;
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
    background: orange;
    right: -15px;
    }

    多谢@大漠 ,@lxzhi @一万等专家指点,css3才得以实现

    下载链接:http://files.cnblogs.com/files/leshao/css3%E5%AE%9E%E7%8E%B0%E6%A2%AF%E5%BD%A2%E4%B8%89%E8%A7%92.rar

  • 相关阅读:
    FreeBSD10下的MySQL5.5配置安装
    TCP Wrappers
    SNAT技术
    子网掩码, 网段主机数计算
    functools wraps
    数据库引擎
    restframework
    Python使用asyncio+aiohttp异步爬取猫眼电影专业版
    Linux 总结
    Nginx日志管理
  • 原文地址:https://www.cnblogs.com/leshao/p/5674720.html
Copyright © 2011-2022 走看看