7.(高级)CSS形状之:平行四边形

一、平行四边形

 7.(高级)CSS形状之:平行四边形_第1张图片

方法一:2HTML

HTML

    

Click me

CSS

.button{transform:skew(-45deg);}

.button div{transform:skew(45deg);}

方法二:伪元素

HTML

Click me

CSS

.button::before{

    content:’’;

    position:absolute;

    top:0;

    left:0;

    bottom:0;

    right:0;

    z-index:-1;

    background:#58a;

    transform:skew(45deg);

}

声明:以上方法参考《CSS揭秘》

 

你可能感兴趣的:(7.(高级)CSS形状之:平行四边形)