css 平行四边

    技术2022-07-11  105

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

    要生成一个平行四边形,只要通过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); }

     

    Processed: 0.014, SQL: 9