zoukankan      html  css  js  c++  java
  • 使用CSS 实现菱形图片,斜条纹背景

    比较简单的菱形图片: 效果如下

    代码部分:

    <div class="d1">
        <img src="img/5.jpg">
    </div>
    
    
    
     .d1{
            margin-left: 100px;
            display: inline-block;
            transform: rotate(45deg);
            overflow: hidden;
        }
        .d1>img {
            max-100% ;
            max-height: 100%;
            transform: rotate(-45deg) scale(1.42);
      }
    

      

    斜条纹背景原理有些类似 但步骤却不同 :

    第一步:我们要实现如下效果:

    CSS部分:  我们至少要创建四条纹理  // ***这里的0指的上一段颜色的结束地方***

    .d3 {
    background: linear-gradient(#fb3 25%, #58a 0, #58a 50%, #fb3 0,#fb3 75%, #58a 0);
        background-size: 100% 30px;   //使用 background-size 调整大小 
        background-repeat: no-repeat;  //为了看到效果,这里去掉了重复 
    }
     

      

    第二步: 使用tansform旋转背景,效果如下:                      再使用默认平铺:

              

    CSS 部分: 

    .d4 {
    background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%, #fb3 0,#fb3 75%, #58a 0);
    background-size: 40px 40px;
    }

     

    但是上面的方法仅仅是实现了 45度的斜条纹背景 当这种方法在60度的情况下会发生如下情况:

    由于度数的改变,我们需要重新计算每一个重复色块大小,但是大体上的思路已经清晰了,接下来就是下面的终极解决方案:

    不管是60度 还是75度 或者其他指定的倾斜数值都能轻松搞定

      

          60deg                                               75deg

    .d5 {
            background: repeating-linear-gradient(75deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
            /*最终更简便的方法 repeating-linear-gradient 平铺线性渐变*/
      }
    

      

      

  • 相关阅读:
    VS2013折叠代码、打开代码的快捷键
    用if做了一个简单的猜拳游戏(做的不好还请指点,谢谢!)
    一维数组的应用
    do while 与while的区别!
    作业.把c语言输出的基础差不多都概括了!
    C语言基础
    c语言:蜗牛的爬行。
    QQ群成员提取
    入门教程2
    VMware WorkStations最小化安装&配置&卸载CentOS 7
  • 原文地址:https://www.cnblogs.com/sunyaaa/p/6765321.html
Copyright © 2011-2022 走看看