平行四边形skew的问题

KeithChou commented 8 years ago

今天在学习《CSS揭秘》的时候遇到这样一个问题。如果我想给平行四边形增加hover伪类，那这个伪类怎么配合伪元素写出来？但是，如果使用嵌套的关系，在外层块级元素写一个skewX，然后在内层块级元素再写一个反向skewX，在给外层块级元素使用:hover状态时，就完美实现了。

SCSS代码如下：嵌套方案

.rascal{
    margin:1.5em;
    position:relative;
    display:inline-block;
    padding:1em;
    color:white;
    font-weight:bold;
    background:#58a;
    @include skew(-30deg,0);
    div{
        @include skew(30deg,0);
    }
    &:hover{
        background:tan;
    }
}

伪元素方案（效果错误）

.rascal{
    margin:1.5em;
    position:relative;
    display:inline-block;
    padding:1em;
    color:white;
    font-weight:bold;
    &:hover{
        background:red;
        @include skew(-30deg,0);
    }
    &::after{
        position:absolute;
        content:'';
        z-index: -1;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background:#58a;
        @include skew(-30deg,0);
    }
}

cssmagic commented 8 years ago

抱歉，暂时没有时间帮你细看。

正好我的微信公众号里有一位叫 “在深秋” 的同学似乎遇到了跟你类似的问题，而且解决问题了，因此我把他的留言转贴到这里，或许可以帮到你。

魔法哥，自从看了css揭秘，一发不可收拾。今天遇到一个问题，做平行四边形导航条，我把 a 元素当成宿主标签加上伪元素用 skew 的确可以生成我想要的，但是做 hover a 标签的时候如果给a设置变形那么字体也会跟着变。不知道你有什么好的解决方案呢？

魔法哥，解决问题啦！

其实我们改变的不是 a 上的，而是 a:hover::before 上的 background。

这样就不会影响内容了。希望能够帮到别人。

KeithChou commented 8 years ago

感谢张老师的回复，我在前不久把这个问题解决了。有个需要注意的就是，需要把伪元素再次重新放在hover伪类上。如果直接在after上套上一层hover的话，这样的效果就只有hover上去的时候才会出现平行四边形了。 SCSS代码如下：

    &::after{
        content:'';
        position:absolute;
        left:0;
        background:#58a;
        right:0;
        bottom:0;
        top:0;
        z-index: -1;
        @include skewX(-30deg);
    }
    &:hover{
        &::after{
            background:#64A2CB;
        }
    }

感谢张老师百忙之中的回复。受益匪浅。

cssmagic commented 7 years ago

@KeithChou 谢谢你的补充，我稍后会整理到注解中。

cssmagic / CSS-Secrets

平行四边形skew的问题 #51