zoukankan      html  css  js  c++  java
  • css 平行四边

    在视觉设计中,平行四边形往往给人一种动感。

    要生成一个平行四边形,只要通过css变形,就可做到:

    -webkit-transform: skewX(-45deg);
    

      

    那么生成一个平行四边形的按钮呢?列如下面这样的效果图:

    通过第一次尝试,我使用了斜向变形:得到下面的效果图,发现里面的文字也进行了拉伸。

    解决方案1:

    有没有办法让容器形状倾斜,而其中的内容不拉伸呢?

    办法就是,我们再对里面的内容进行一次反向skew()变形,所以我们首先得把里面的内容添加一层额外的元素进行包裹:

    <a class="g"> <div> Click me</div> </a>


    .g
    {-webkit-transform: skewX(-45deg);} .g>div{-webkit-transform: skewX(45deg)}

    最终能得到的正确的效果图。

    解决方案2:

    思路是,把所有的样式应用到伪元素上,然后再对伪元素进行变形。因为我们的内容不包含在伪元素里。so 可以使用伪元素方案:

    .g{position: relative;
    /*其他的文字样式,内边距等等*/} .g::before{ content:'';//用伪元素来生成一个矩形 position: absolute; top:0;right: 0;bottom: 0;left: 0;//所有的偏移量设置为0,以便于伪元素被拉至宿主元素的尺寸。 z-index: -2; background: #58a; -webkit-transform: skew(45deg); }
  • 相关阅读:
    python中使用cookies免登陆
    python中列表与元组的区别与转换
    python模块之mock
    python模块之Faker
    python模块之requests
    adb简单命令使用
    Mac下安装appium+python+Android sdk 环境完整流程
    git+pycharm结合使用
    github内的一些操作
    mac下git连接远程仓库gitee
  • 原文地址:https://www.cnblogs.com/rain-null/p/6690093.html
Copyright © 2011-2022 走看看